feat(商品属性)
This commit is contained in:
unknown
parent
50e03907e7
commit
c188d92c11
|
|
@ -1,78 +1,77 @@
|
|||
<template>
|
||||
<view class="property-detail">
|
||||
<template v-for="item in goodsPropertyList" :key="item.id">
|
||||
<view class="property-item ss-p-40 ss-gap-40" v-if="item.checked">
|
||||
<view class="property-name ss-flex ss-gap-40 ss-m-b-20">
|
||||
<view class="property-name-text">规格名</view>
|
||||
<view class="property-name-value">{{ item.name }}</view>
|
||||
</view>
|
||||
<view class="property-value ss-flex ss-gap-40">
|
||||
<view class="property-value-text">规格值</view>
|
||||
<view class="property-value-value ss-flex ss-gap-10">
|
||||
<view
|
||||
v-for="sitem in item.propertyValues"
|
||||
@tap="chooseProperty(item)"
|
||||
:class="['item', item.checked ? 'active' : '']"
|
||||
>{{ sitem.name }}</view
|
||||
>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
<view class="property-detail">
|
||||
<template v-for="item in goodsPropertyList" :key="item.id">
|
||||
<view class="property-item ss-p-40 ss-gap-40" v-if="item.checked">
|
||||
<view class="property-name ss-flex ss-gap-40 ss-m-b-20">
|
||||
<view class="property-name-text">规格名</view>
|
||||
<view class="property-name-value">{{ item.name }}</view>
|
||||
</view>
|
||||
<view class="property-value ss-flex ss-gap-40">
|
||||
<view class="property-value-text">规格值</view>
|
||||
<view class="property-value-value ss-flex ss-gap-10">
|
||||
<view v-for="sitem in item.propertyValues" @tap="chooseProperty(item)"
|
||||
:class="['item', sitem.checked ? 'active' : '']">{{ sitem.name }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { defineProps, ref, computed } from 'vue'
|
||||
import { goodsPropertyList } from '../js/sku';
|
||||
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
goodsPropertyList: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
modelValue: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
goodsPropertyList: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
})
|
||||
|
||||
function chooseProperty(item) {
|
||||
item.checked = !item.checked
|
||||
item.checked = !item.checked
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.property-detail {
|
||||
.property-item {
|
||||
margin: 0 40rpx 20rpx;
|
||||
background-color: #f9f9f9;
|
||||
border-radius: 10px;
|
||||
.property-item {
|
||||
margin: 0 40rpx 20rpx;
|
||||
background-color: #f9f9f9;
|
||||
border-radius: 10px;
|
||||
|
||||
.property-name {
|
||||
.property-name-text {
|
||||
color: #606266;
|
||||
}
|
||||
}
|
||||
|
||||
.property-value {
|
||||
.property-value-text {
|
||||
color: #606266;
|
||||
}
|
||||
.property-value-value {
|
||||
.item {
|
||||
text-align: center;
|
||||
line-height: 60rpx;
|
||||
height: 60rpx;
|
||||
padding: 0 10px;
|
||||
border-radius: 10px;
|
||||
background-color: var(--ui-BG-4);
|
||||
}
|
||||
.active {
|
||||
color: #fff;
|
||||
background-color: var(--ui-BG-Main);
|
||||
}
|
||||
}
|
||||
}
|
||||
.property-name {
|
||||
.property-name-text {
|
||||
color: #606266;
|
||||
}
|
||||
}
|
||||
|
||||
.property-value {
|
||||
.property-value-text {
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
.property-value-value {
|
||||
.item {
|
||||
text-align: center;
|
||||
line-height: 60rpx;
|
||||
height: 60rpx;
|
||||
padding: 0 10px;
|
||||
border-radius: 10px;
|
||||
background-color: var(--ui-BG-4);
|
||||
}
|
||||
|
||||
.active {
|
||||
color: #fff;
|
||||
background-color: var(--ui-BG-Main);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,122 +1,129 @@
|
|||
<template>
|
||||
<view class="property-list">
|
||||
<uni-popup type="bottom" ref="propertyListPopupRef" background-color="#fff">
|
||||
<view class="popup-header">
|
||||
<view class="button-cancel" @click="onClosePopup">取消</view>
|
||||
<view class="button-link" @click="onConfirmPopup">确定</view>
|
||||
</view>
|
||||
<view class="popup-content">
|
||||
<view
|
||||
v-for="item in goodsPropertyList"
|
||||
:key="item.id"
|
||||
:class="['property-item', item.checked ? 'active' : '']"
|
||||
@tap="chooseProperty(item)"
|
||||
>
|
||||
{{ item.name }}
|
||||
</view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
</view>
|
||||
<view class="property-list">
|
||||
<uni-popup type="bottom" ref="propertyListPopupRef" background-color="#fff">
|
||||
<view class="popup-header">
|
||||
<view class="button-cancel" @click="onClosePopup">取消</view>
|
||||
<view class="button-link" @click="onConfirmPopup">确定</view>
|
||||
</view>
|
||||
<view class="popup-content">
|
||||
<view v-for="item in nowGoodsPropertyList" :key="item.id"
|
||||
:class="['property-item', item.checked ? 'active' : '']" @tap="chooseProperty(item)">
|
||||
{{ item.name }}
|
||||
</view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, defineEmits, defineProps, defineExpose } from 'vue'
|
||||
import peach from '@/peach'
|
||||
import { cloneDeep } from 'lodash';
|
||||
|
||||
/**
|
||||
* todo 底部高度配置
|
||||
*/
|
||||
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
default: () => [],
|
||||
required: true,
|
||||
type: Array,
|
||||
},
|
||||
goodsPropertyList: {
|
||||
default: () => [],
|
||||
required: true,
|
||||
type: Array,
|
||||
},
|
||||
modelValue: {
|
||||
default: () => [],
|
||||
required: true,
|
||||
type: Array,
|
||||
},
|
||||
goodsPropertyList: {
|
||||
default: () => [],
|
||||
required: true,
|
||||
type: Array,
|
||||
},
|
||||
})
|
||||
|
||||
const emit = defineEmits(['update:modelValue'])
|
||||
const nowGoodsPropertyList = ref([])
|
||||
|
||||
const emit = defineEmits(['update:modelValue', 'confirm'])
|
||||
|
||||
const propertyListPopupRef = ref()
|
||||
|
||||
const onClosePopup = () => {
|
||||
propertyListPopupRef.value.close()
|
||||
propertyListPopupRef.value.close()
|
||||
}
|
||||
|
||||
function chooseProperty(item) {
|
||||
item.checked = !item.checked
|
||||
item.checked = !item.checked
|
||||
}
|
||||
|
||||
function onConfirmPopup() {
|
||||
let resut = props.goodsPropertyList
|
||||
.filter((item) => {
|
||||
if (item.checked) {
|
||||
return item.propertyValues.filter((sitem) => sitem.checked)
|
||||
}
|
||||
})
|
||||
.map((item) => {
|
||||
let children = item.propertyValues.filter((sitem) => sitem.checked).map((titem) => titem.id)
|
||||
return {
|
||||
id: item.id,
|
||||
children: children,
|
||||
}
|
||||
})
|
||||
|
||||
console.log(resut)
|
||||
// emit('update:modelValue', props.goodsPropertyList.filter((item) => item.checked).map((item) => item.id) ?? [])
|
||||
onClosePopup()
|
||||
let result = nowGoodsPropertyList.value
|
||||
.filter((item) => {
|
||||
if (item.checked) {
|
||||
return item.propertyValues.filter((sitem) => sitem.checked)
|
||||
}
|
||||
})
|
||||
.map((item) => {
|
||||
let children = item.propertyValues.filter((sitem) => sitem.checked).map((titem) => titem.id)
|
||||
return {
|
||||
id: item.id,
|
||||
children: children,
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
peach.$store('trade').selectedProperty = result
|
||||
emit('confirm')
|
||||
emit('update:modelValue', result)
|
||||
onClosePopup()
|
||||
}
|
||||
|
||||
function onOpen() {
|
||||
propertyListPopupRef.value.open('bottom')
|
||||
nowGoodsPropertyList.value = cloneDeep(props.goodsPropertyList)
|
||||
propertyListPopupRef.value.open('bottom')
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
onOpen,
|
||||
onOpen,
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.property-list {
|
||||
.popup-content {
|
||||
height: 500rpx;
|
||||
padding: 40rpx;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 20rpx;
|
||||
justify-content: flex-start;
|
||||
.property-item {
|
||||
text-align: center;
|
||||
line-height: 60rpx;
|
||||
height: 60rpx;
|
||||
padding: 0 10px;
|
||||
border-radius: 10px;
|
||||
background-color: var(--ui-BG-4);
|
||||
}
|
||||
.active {
|
||||
color: #fff;
|
||||
background-color: var(--ui-BG-Main);
|
||||
}
|
||||
.popup-content {
|
||||
height: 500rpx;
|
||||
padding: 40rpx;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 20rpx;
|
||||
justify-content: flex-start;
|
||||
|
||||
.property-item {
|
||||
text-align: center;
|
||||
line-height: 60rpx;
|
||||
height: 60rpx;
|
||||
padding: 0 10px;
|
||||
border-radius: 10px;
|
||||
background-color: var(--ui-BG-4);
|
||||
}
|
||||
|
||||
.button-link {
|
||||
color: #1892ea;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
.button-cancel {
|
||||
color: #888;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
.popup-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 24rpx 38rpx 0;
|
||||
.active {
|
||||
color: #fff;
|
||||
background-color: var(--ui-BG-Main);
|
||||
}
|
||||
}
|
||||
|
||||
.button-link {
|
||||
color: #1892ea;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.button-cancel {
|
||||
color: #888;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.popup-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 24rpx 38rpx 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,89 +1,93 @@
|
|||
import { ref, computed } from 'vue'
|
||||
import { onLoad } from '@dcloudio/uni-app'
|
||||
import peach from '@/peach'
|
||||
import GoodsApi from '@/peach/api/trade/goods'
|
||||
import { SPEC_TYPE } from './config'
|
||||
import { ref, computed } from "vue";
|
||||
import { onLoad } from "@dcloudio/uni-app";
|
||||
import peach from "@/peach";
|
||||
import GoodsApi from "@/peach/api/trade/goods";
|
||||
import { SPEC_TYPE } from "./config";
|
||||
|
||||
const pickerRef = ref(null)
|
||||
const pickerRef = ref(null);
|
||||
|
||||
const propertyList = ref([
|
||||
{
|
||||
id: 36,
|
||||
children: [68],
|
||||
},
|
||||
{
|
||||
id: 37,
|
||||
children: [],
|
||||
},
|
||||
])
|
||||
const propertyList = ref([]);
|
||||
|
||||
const goodsPropertyList = ref([])
|
||||
const goodsPropertyList = ref([]);
|
||||
|
||||
const propertyListRef = ref(null)
|
||||
const propertyListRef = ref(null);
|
||||
|
||||
const formData = ref({
|
||||
specType: true,
|
||||
specText: SPEC_TYPE[0].label,
|
||||
})
|
||||
specType: true,
|
||||
specText: SPEC_TYPE[0].label,
|
||||
});
|
||||
|
||||
async function showPropertyList() {
|
||||
await getGoodsProperty()
|
||||
propertyListRef.value.onOpen()
|
||||
await getGoodsProperty();
|
||||
propertyListRef.value.onOpen();
|
||||
}
|
||||
|
||||
function onRDPickerConfirm(e) {
|
||||
peach.$store('trade').specType = SPEC_TYPE[e.value[0]].value
|
||||
formData.value.specText = SPEC_TYPE[e.value[0]].label
|
||||
formData.value.specType = SPEC_TYPE[e.value[0]].value
|
||||
peach.$store("trade").specType = SPEC_TYPE[e.value[0]].value;
|
||||
formData.value.specText = SPEC_TYPE[e.value[0]].label;
|
||||
formData.value.specType = SPEC_TYPE[e.value[0]].value;
|
||||
}
|
||||
|
||||
function pickerProperty() {
|
||||
let index = specType ? 1 : 0
|
||||
pickerRef.value.onOpen([index])
|
||||
let index = specType ? 1 : 0;
|
||||
pickerRef.value.onOpen([index]);
|
||||
}
|
||||
|
||||
function onPropertyConfirm(e) {
|
||||
console.log(e)
|
||||
getGoodsProperty();
|
||||
console.log(e);
|
||||
}
|
||||
|
||||
async function getGoodsProperty() {
|
||||
let { data } = await GoodsApi.getHistoryProperty()
|
||||
// 根据已经选择数据，设置默认选中
|
||||
data.forEach((item) => {
|
||||
// 判断属性是否已经选中
|
||||
let propertyParent = propertyList.value.find((sitem) => sitem?.id === item.id)
|
||||
let { data } = await GoodsApi.getHistoryProperty();
|
||||
propertyList.value = [];
|
||||
|
||||
item.checked = propertyParent ? true : false
|
||||
// 把 propertyList 中 id 相同的属性合并，并去重
|
||||
propertyList.value = peach.$store("trade").selectedProperty;
|
||||
|
||||
// 如果属性已经选中，查询子类中是否有选中
|
||||
if (item.checked) {
|
||||
item.propertyValues.forEach((child) => {
|
||||
let childResult = propertyParent?.children.some((schild) => schild?.id === child.id)
|
||||
child.checked = childResult ? true : false
|
||||
})
|
||||
}
|
||||
})
|
||||
goodsPropertyList.value = data
|
||||
// 根据已经选择数据，设置默认选中
|
||||
data.forEach((item) => {
|
||||
// 判断属性是否已经选中
|
||||
let propertyParent = propertyList.value.find(
|
||||
(sitem) => sitem?.id === item.id
|
||||
);
|
||||
|
||||
item.checked = propertyParent ? true : false;
|
||||
|
||||
// 如果属性已经选中，查询子类中是否有选中
|
||||
if (item.checked) {
|
||||
item.propertyValues.forEach((child) => {
|
||||
let childResult = propertyParent?.children.some(
|
||||
(schild) => schild?.id === child.id
|
||||
);
|
||||
console.log(childResult);
|
||||
child.checked = childResult ? true : false;
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
goodsPropertyList.value = data;
|
||||
}
|
||||
|
||||
const specType = computed(() => peach.$store('trade').specType)
|
||||
const specType = computed(() => peach.$store("trade").specType);
|
||||
|
||||
function initial() {
|
||||
onLoad(() => {
|
||||
formData.value.specType = specType ? true : false
|
||||
formData.value.specText = SPEC_TYPE[specType ? 1 : 0].label
|
||||
})
|
||||
onLoad(() => {
|
||||
formData.value.specType = specType ? true : false;
|
||||
formData.value.specText = SPEC_TYPE[specType ? 1 : 0].label;
|
||||
getGoodsProperty();
|
||||
});
|
||||
}
|
||||
|
||||
export {
|
||||
initial,
|
||||
pickerRef,
|
||||
pickerProperty,
|
||||
propertyListRef,
|
||||
formData,
|
||||
onRDPickerConfirm,
|
||||
onPropertyConfirm,
|
||||
propertyList,
|
||||
showPropertyList,
|
||||
goodsPropertyList,
|
||||
}
|
||||
initial,
|
||||
pickerRef,
|
||||
pickerProperty,
|
||||
propertyListRef,
|
||||
formData,
|
||||
onRDPickerConfirm,
|
||||
onPropertyConfirm,
|
||||
propertyList,
|
||||
showPropertyList,
|
||||
goodsPropertyList,
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,129 +1,61 @@
|
|||
<template>
|
||||
<pb-layout
|
||||
class="manage-goods"
|
||||
title="发布商品"
|
||||
leftIcon="leftIcon"
|
||||
navbar="normal"
|
||||
:bgStyle="bgStyle"
|
||||
opacityBgUi="bg-white"
|
||||
color="black"
|
||||
>
|
||||
<view class="goods-form">
|
||||
<uni-forms ref="formRef" v-model="formData" :rules="rules" label-position="top" label-width="160">
|
||||
<uni-forms-item label="商品封面图" name="picUrl" required>
|
||||
<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="sliderPicUrls" required>
|
||||
<p-uploader
|
||||
v-model:url="formData.sliderPicUrls"
|
||||
fileMediatype="image"
|
||||
limit="6"
|
||||
mode="grid"
|
||||
:imageStyles="{ width: '168rpx', height: '168rpx' }"
|
||||
/>
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="商品名称" name="name" required>
|
||||
<uni-easyinput type="text" trim="all" v-model="formData.name" placeholder="请输入商品名称" />
|
||||
</uni-forms-item>
|
||||
<uni-forms-item
|
||||
label="商品分类"
|
||||
@tap="openPicker('category', 'multiple')"
|
||||
name="categoryId"
|
||||
label-position="left"
|
||||
required
|
||||
>
|
||||
<uni-easyinput
|
||||
type="text"
|
||||
v-model="formData.categoryText"
|
||||
:styles="selfStyles"
|
||||
placeholderStyle="color:#8a8a8a"
|
||||
:clearable="false"
|
||||
:inputBorder="false"
|
||||
placeholder="请选择商品分类"
|
||||
disabled
|
||||
>
|
||||
<template v-slot:right>
|
||||
<uni-icons type="right" />
|
||||
</template>
|
||||
</uni-easyinput>
|
||||
</uni-forms-item>
|
||||
<uni-forms-item
|
||||
label="商品品牌"
|
||||
name="brandId"
|
||||
label-position="left"
|
||||
required
|
||||
@tap="openPicker('brand', 'single')"
|
||||
>
|
||||
<uni-easyinput
|
||||
type="text"
|
||||
v-model="formData.brandText"
|
||||
:styles="selfStyles"
|
||||
placeholderStyle="color:#8a8a8a"
|
||||
:clearable="false"
|
||||
:inputBorder="false"
|
||||
placeholder="请选择商品品牌"
|
||||
disabled
|
||||
>
|
||||
<template v-slot:right>
|
||||
<uni-icons type="right" />
|
||||
</template>
|
||||
</uni-easyinput>
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="商品规格" name="skus" required label-position="left">
|
||||
<view class="btn-group">
|
||||
<button class="ss-reset-button ss-set-property" @tap="clickSetProperty">规格设置</button>
|
||||
</view>
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="商品关键词" name="keyword" required>
|
||||
<uni-easyinput type="text" v-model="formData.keyword" placeholder="请输入商品关键词" />
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="商品简介" name="introduction" required>
|
||||
<uni-easyinput
|
||||
type="textarea"
|
||||
trim="all"
|
||||
autoHeight
|
||||
v-model="formData.introduction"
|
||||
placeholder="请输入商品简介"
|
||||
/>
|
||||
</uni-forms-item>
|
||||
<uni-forms-item
|
||||
label="物流设置"
|
||||
@tap="openPicker('delivery', 'single')"
|
||||
name="deliveryTypes"
|
||||
label-position="left"
|
||||
required
|
||||
>
|
||||
<uni-easyinput
|
||||
type="text"
|
||||
:clearable="false"
|
||||
:styles="selfStyles"
|
||||
placeholderStyle="color:#8a8a8a"
|
||||
:inputBorder="false"
|
||||
v-model="formData.deliveryText"
|
||||
placeholder="请选择配送方式"
|
||||
disabled
|
||||
>
|
||||
<template v-slot:right>
|
||||
<uni-icons type="right" />
|
||||
</template>
|
||||
</uni-easyinput>
|
||||
</uni-forms-item>
|
||||
</uni-forms>
|
||||
</view>
|
||||
<pb-layout class="manage-goods" title="发布商品" leftIcon="leftIcon" navbar="normal" :bgStyle="bgStyle"
|
||||
opacityBgUi="bg-white" color="black">
|
||||
<view class="goods-form">
|
||||
<uni-forms ref="formRef" v-model="formData" :rules="rules" label-position="top" label-width="160">
|
||||
<uni-forms-item label="商品封面图" name="picUrl" required>
|
||||
<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="sliderPicUrls" required>
|
||||
<p-uploader v-model:url="formData.sliderPicUrls" fileMediatype="image" limit="6" mode="grid"
|
||||
:imageStyles="{ width: '168rpx', height: '168rpx' }" />
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="商品名称" name="name" required>
|
||||
<uni-easyinput type="text" trim="all" v-model="formData.name" placeholder="请输入商品名称" />
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="商品分类" @tap="openPicker('category', 'multiple')" name="categoryId" label-position="left"
|
||||
required>
|
||||
<uni-easyinput type="text" v-model="formData.categoryText" :styles="selfStyles"
|
||||
placeholderStyle="color:#8a8a8a" :clearable="false" :inputBorder="false" placeholder="请选择商品分类" disabled>
|
||||
<template v-slot:right>
|
||||
<uni-icons type="right" />
|
||||
</template>
|
||||
</uni-easyinput>
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="商品品牌" name="brandId" label-position="left" required @tap="openPicker('brand', 'single')">
|
||||
<uni-easyinput type="text" v-model="formData.brandText" :styles="selfStyles" placeholderStyle="color:#8a8a8a"
|
||||
:clearable="false" :inputBorder="false" placeholder="请选择商品品牌" disabled>
|
||||
<template v-slot:right>
|
||||
<uni-icons type="right" />
|
||||
</template>
|
||||
</uni-easyinput>
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="商品规格" name="skus" required label-position="left">
|
||||
<view class="btn-group">
|
||||
<button class="ss-reset-button ss-set-property" @tap="clickSetProperty">规格设置</button>
|
||||
</view>
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="商品关键词" name="keyword" required>
|
||||
<uni-easyinput type="text" v-model="formData.keyword" placeholder="请输入商品关键词" />
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="商品简介" name="introduction" required>
|
||||
<uni-easyinput type="textarea" trim="all" autoHeight v-model="formData.introduction" placeholder="请输入商品简介" />
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="物流设置" @tap="openPicker('delivery', 'single')" name="deliveryTypes" label-position="left"
|
||||
required>
|
||||
<uni-easyinput type="text" :clearable="false" :styles="selfStyles" placeholderStyle="color:#8a8a8a"
|
||||
:inputBorder="false" v-model="formData.deliveryText" placeholder="请选择配送方式" disabled>
|
||||
<template v-slot:right>
|
||||
<uni-icons type="right" />
|
||||
</template>
|
||||
</uni-easyinput>
|
||||
</uni-forms-item>
|
||||
</uni-forms>
|
||||
</view>
|
||||
|
||||
<p-picker
|
||||
ref="pickerRef"
|
||||
:mode="pickerMode"
|
||||
:options-cols="optionsCols"
|
||||
@confirm="onRDPickerConfirm"
|
||||
></p-picker>
|
||||
</pb-layout>
|
||||
<p-picker ref="pickerRef" :mode="pickerMode" :options-cols="optionsCols" @confirm="onRDPickerConfirm"></p-picker>
|
||||
</pb-layout>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
|
@ -135,117 +67,117 @@ import GoodsApi from '@/peach/api/trade/goods'
|
|||
import _ from 'lodash'
|
||||
|
||||
const bgStyle = {
|
||||
backgroundImage: '',
|
||||
backgroundColor: '#fff',
|
||||
description: '',
|
||||
backgroundImage: '',
|
||||
backgroundColor: '#fff',
|
||||
description: '',
|
||||
}
|
||||
|
||||
const DELIVERY_TYPES = [
|
||||
{
|
||||
value: 3,
|
||||
label: '到店核销',
|
||||
},
|
||||
{
|
||||
value: 4,
|
||||
label: '商家配送',
|
||||
},
|
||||
{
|
||||
value: 3,
|
||||
label: '到店核销',
|
||||
},
|
||||
{
|
||||
value: 4,
|
||||
label: '商家配送',
|
||||
},
|
||||
]
|
||||
|
||||
const selfStyles = {
|
||||
backgroundColor: '#f9f9f9',
|
||||
backgroundColor: '#f9f9f9',
|
||||
}
|
||||
|
||||
const pickerRef = ref()
|
||||
const formData = ref({
|
||||
picUrl: 'http://101.43.181.163:9001/mall-backend/8f11e372520501531d06bfce15ea97bbecead41c5e4a36d15d7e40af85729ff3.png',
|
||||
sliderPicUrls: [
|
||||
'http://101.43.181.163:9001/mall-backend/8f11e372520501531d06bfce15ea97bbecead41c5e4a36d15d7e40af85729ff3.png',
|
||||
'http://101.43.181.163:9001/mall-backend/8f11e372520501531d06bfce15ea97bbecead41c5e4a36d15d7e40af85729ff3.png',
|
||||
'http://101.43.181.163:9001/mall-backend/8f11e372520501531d06bfce15ea97bbecead41c5e4a36d15d7e40af85729ff3.png',
|
||||
],
|
||||
name: '测试商品',
|
||||
categoryId: [],
|
||||
categoryText: '',
|
||||
brandId: '',
|
||||
keyword: '香酥鸭，但家',
|
||||
deliveryTypes: [],
|
||||
deliveryText: '',
|
||||
introduction: '但家贵阳香酥鸭现榨香酥鸭无任何添加剂香酥鸭但家贵阳香酥鸭现榨香酥鸭无任何添加剂香酥鸭',
|
||||
picUrl: 'http://101.43.181.163:9001/mall-backend/8f11e372520501531d06bfce15ea97bbecead41c5e4a36d15d7e40af85729ff3.png',
|
||||
sliderPicUrls: [
|
||||
'http://101.43.181.163:9001/mall-backend/8f11e372520501531d06bfce15ea97bbecead41c5e4a36d15d7e40af85729ff3.png',
|
||||
'http://101.43.181.163:9001/mall-backend/8f11e372520501531d06bfce15ea97bbecead41c5e4a36d15d7e40af85729ff3.png',
|
||||
'http://101.43.181.163:9001/mall-backend/8f11e372520501531d06bfce15ea97bbecead41c5e4a36d15d7e40af85729ff3.png',
|
||||
],
|
||||
name: '测试商品',
|
||||
categoryId: [],
|
||||
categoryText: '',
|
||||
brandId: '',
|
||||
keyword: '香酥鸭，但家',
|
||||
deliveryTypes: [],
|
||||
deliveryText: '',
|
||||
introduction: '但家贵阳香酥鸭现榨香酥鸭无任何添加剂香酥鸭但家贵阳香酥鸭现榨香酥鸭无任何添加剂香酥鸭',
|
||||
})
|
||||
|
||||
const rules = {
|
||||
name: {
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
errorMessage: '请输入商品名称',
|
||||
},
|
||||
],
|
||||
},
|
||||
picUrl: {
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
errorMessage: '请上传商品封面图',
|
||||
},
|
||||
],
|
||||
},
|
||||
sliderPicUrls: {
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
errorMessage: '请上传商品轮播图',
|
||||
},
|
||||
],
|
||||
},
|
||||
categoryId: {
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
errorMessage: '请选择商品分类',
|
||||
},
|
||||
],
|
||||
},
|
||||
brandId: {
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
errorMessage: '请选择商品品牌',
|
||||
},
|
||||
],
|
||||
},
|
||||
skus: {
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
errorMessage: '请选择商品规格',
|
||||
},
|
||||
],
|
||||
},
|
||||
keyword: {
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
errorMessage: '请输入商品关键字',
|
||||
},
|
||||
],
|
||||
},
|
||||
introduction: {
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
errorMessage: '请输入商品简介',
|
||||
},
|
||||
],
|
||||
},
|
||||
deliveryTypes: {
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
errorMessage: '请选择商品物流',
|
||||
},
|
||||
],
|
||||
},
|
||||
name: {
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
errorMessage: '请输入商品名称',
|
||||
},
|
||||
],
|
||||
},
|
||||
picUrl: {
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
errorMessage: '请上传商品封面图',
|
||||
},
|
||||
],
|
||||
},
|
||||
sliderPicUrls: {
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
errorMessage: '请上传商品轮播图',
|
||||
},
|
||||
],
|
||||
},
|
||||
categoryId: {
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
errorMessage: '请选择商品分类',
|
||||
},
|
||||
],
|
||||
},
|
||||
brandId: {
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
errorMessage: '请选择商品品牌',
|
||||
},
|
||||
],
|
||||
},
|
||||
skus: {
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
errorMessage: '请选择商品规格',
|
||||
},
|
||||
],
|
||||
},
|
||||
keyword: {
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
errorMessage: '请输入商品关键字',
|
||||
},
|
||||
],
|
||||
},
|
||||
introduction: {
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
errorMessage: '请输入商品简介',
|
||||
},
|
||||
],
|
||||
},
|
||||
deliveryTypes: {
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
errorMessage: '请选择商品物流',
|
||||
},
|
||||
],
|
||||
},
|
||||
}
|
||||
|
||||
const formRef = ref(null)
|
||||
|
|
@ -256,175 +188,197 @@ const brandList = ref([])
|
|||
const optionsCols = ref([])
|
||||
|
||||
function openPicker(mark, mode) {
|
||||
pickerMode.value = mode
|
||||
popMark.value = mark
|
||||
if (mark === 'delivery') {
|
||||
optionsCols.value = DELIVERY_TYPES
|
||||
pickerRef.value.onOpen([0])
|
||||
} else if (mark === 'category') {
|
||||
optionsCols.value = categoryList.value
|
||||
pickerRef.value.onOpen([0, 0])
|
||||
} else if (mark === 'brand') {
|
||||
optionsCols.value = brandList.value
|
||||
pickerRef.value.onOpen([0])
|
||||
}
|
||||
pickerMode.value = mode
|
||||
popMark.value = mark
|
||||
if (mark === 'delivery') {
|
||||
optionsCols.value = DELIVERY_TYPES
|
||||
pickerRef.value.onOpen([0])
|
||||
} else if (mark === 'category') {
|
||||
optionsCols.value = categoryList.value
|
||||
pickerRef.value.onOpen([0, 0])
|
||||
} else if (mark === 'brand') {
|
||||
optionsCols.value = brandList.value
|
||||
pickerRef.value.onOpen([0])
|
||||
}
|
||||
}
|
||||
|
||||
function onRDPickerConfirm(e) {
|
||||
if (popMark.value === 'delivery') {
|
||||
formData.value.deliveryTypes = []
|
||||
formData.value.deliveryText = DELIVERY_TYPES[e.value[0]].label
|
||||
formData.value.deliveryTypes.push(DELIVERY_TYPES[e.value[0]].value)
|
||||
}
|
||||
if (popMark.value === 'delivery') {
|
||||
formData.value.deliveryTypes = []
|
||||
formData.value.deliveryText = DELIVERY_TYPES[e.value[0]].label
|
||||
formData.value.deliveryTypes.push(DELIVERY_TYPES[e.value[0]].value)
|
||||
}
|
||||
|
||||
if (popMark.value === 'category') {
|
||||
formData.value.categoryId = categoryList.value[e.value[0]].children[e.value[1]].id
|
||||
formData.value.categoryText =
|
||||
categoryList.value[e.value[0]].name + '/' + categoryList.value[e.value[0]].children[e.value[1]].name
|
||||
}
|
||||
if (popMark.value === 'category') {
|
||||
formData.value.categoryId = categoryList.value[e.value[0]].children[e.value[1]].id
|
||||
formData.value.categoryText =
|
||||
categoryList.value[e.value[0]].name + '/' + categoryList.value[e.value[0]].children[e.value[1]].name
|
||||
}
|
||||
|
||||
if (popMark.value === 'brand') {
|
||||
formData.value.brandId = brandList.value[e.value[0]].id
|
||||
}
|
||||
if (popMark.value === 'brand') {
|
||||
formData.value.brandId = brandList.value[e.value[0]].id
|
||||
}
|
||||
}
|
||||
|
||||
function clickSetProperty() {
|
||||
peach.$store('trade').$patch({
|
||||
selectedProperty: formData.value.skus,
|
||||
goodsInfo: formData.value,
|
||||
})
|
||||
peach.$router.go('/pages/product/sku')
|
||||
// 如果是多规格，处理格式问题，合并属性
|
||||
let temp = formData.value.skus.map((item) => {
|
||||
return item.properties.map((sitem) => ({
|
||||
id: sitem.propertyId,
|
||||
children: [sitem.valueId],
|
||||
}));
|
||||
})
|
||||
.flat(1);
|
||||
|
||||
// 去除重复数据
|
||||
let result = temp.reduce((pre, cur) => {
|
||||
let index = pre.findIndex((item) => item.id === cur.id);
|
||||
if (index !== -1) {
|
||||
pre[index].children.push(...new Set(cur.children));
|
||||
} else {
|
||||
pre.push(cur);
|
||||
}
|
||||
|
||||
return pre;
|
||||
}, []);
|
||||
|
||||
peach.$store('trade').$patch({
|
||||
selectedProperty: result,
|
||||
goodsInfo: formData.value,
|
||||
})
|
||||
peach.$router.go('/pages/product/sku')
|
||||
}
|
||||
|
||||
function getProduct(id) {
|
||||
GoodsApi.getProduct({ id }).then((res) => {
|
||||
formData.value = res.data
|
||||
GoodsApi.getProduct({ id }).then((res) => {
|
||||
formData.value = res.data
|
||||
|
||||
// 循环遍历 categoryList，从二级分类找出和 formData.value.categoryId 相等的
|
||||
let tempCategory = categoryList.value.find((item) => {
|
||||
return item.children.find((child) => {
|
||||
return child.id === formData.value.categoryId
|
||||
})
|
||||
})
|
||||
|
||||
formData.value.categoryText =
|
||||
tempCategory.name +
|
||||
'/' +
|
||||
tempCategory.children.find((item) => {
|
||||
return item.id === formData.value.categoryId
|
||||
}).name
|
||||
|
||||
// 循环遍历 brandList, 从一级分类找出和 formData.value.brandId 相等的
|
||||
let tempBrand = brandList.value.find((item) => {
|
||||
return item.id === formData.value.brandId
|
||||
})
|
||||
|
||||
formData.value.brandText = tempBrand.name
|
||||
|
||||
// 从 DELIVERY_TYPES 找出和 formData.value.deliveryTypes 相等的
|
||||
formData.value.deliveryText = DELIVERY_TYPES.find((item) => {
|
||||
return item.value === formData.value.deliveryTypes[0]
|
||||
}).label
|
||||
// 循环遍历 categoryList，从二级分类找出和 formData.value.categoryId 相等的
|
||||
let tempCategory = categoryList.value.find((item) => {
|
||||
return item.children.find((child) => {
|
||||
return child.id === formData.value.categoryId
|
||||
})
|
||||
})
|
||||
|
||||
formData.value.categoryText =
|
||||
tempCategory.name +
|
||||
'/' +
|
||||
tempCategory.children.find((item) => {
|
||||
return item.id === formData.value.categoryId
|
||||
}).name
|
||||
|
||||
// 循环遍历 brandList, 从一级分类找出和 formData.value.brandId 相等的
|
||||
let tempBrand = brandList.value.find((item) => {
|
||||
return item.id === formData.value.brandId
|
||||
})
|
||||
|
||||
formData.value.brandText = tempBrand.name
|
||||
|
||||
// 从 DELIVERY_TYPES 找出和 formData.value.deliveryTypes 相等的
|
||||
formData.value.deliveryText = DELIVERY_TYPES.find((item) => {
|
||||
return item.value === formData.value.deliveryTypes[0]
|
||||
}).label
|
||||
})
|
||||
}
|
||||
|
||||
function onSubmit() {
|
||||
console.log('res', formData.value)
|
||||
console.log('res', formData.value)
|
||||
|
||||
formRef.value
|
||||
.validate()
|
||||
.then(async (res) => {
|
||||
let tempObj = { ...res }
|
||||
formRef.value
|
||||
.validate()
|
||||
.then(async (res) => {
|
||||
let tempObj = { ...res }
|
||||
|
||||
if (formData.value.id) {
|
||||
tempObj.id = formData.value.id
|
||||
await GoodsApi.editProduct(tempObj)
|
||||
} else {
|
||||
await GoodsApi.addProduct(tempObj)
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log('err', err)
|
||||
})
|
||||
if (formData.value.id) {
|
||||
tempObj.id = formData.value.id
|
||||
await GoodsApi.editProduct(tempObj)
|
||||
} else {
|
||||
await GoodsApi.addProduct(tempObj)
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log('err', err)
|
||||
})
|
||||
}
|
||||
|
||||
// 获得商品分类
|
||||
async function getCategoryList() {
|
||||
let { data } = await GoodsApi.getGoodsCategory()
|
||||
categoryList.value = handleTree(data)
|
||||
let { data } = await GoodsApi.getGoodsCategory()
|
||||
categoryList.value = handleTree(data)
|
||||
}
|
||||
|
||||
// 获得商品品牌
|
||||
async function getBrandList() {
|
||||
let { data } = await GoodsApi.getBrand()
|
||||
brandList.value = data
|
||||
let { data } = await GoodsApi.getBrand()
|
||||
brandList.value = data
|
||||
}
|
||||
|
||||
onLoad(async (options) => {
|
||||
await getCategoryList()
|
||||
await getBrandList()
|
||||
if (options.id) {
|
||||
getProduct(options.id)
|
||||
}
|
||||
await getCategoryList()
|
||||
await getBrandList()
|
||||
if (options.id) {
|
||||
getProduct(options.id)
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.manage-goods {
|
||||
.goods-form {
|
||||
margin: 40rpx;
|
||||
.goods-form {
|
||||
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;
|
||||
}
|
||||
.btn-group {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
background-color: #f9f9f9;
|
||||
border-radius: 0 10px 10px 0;
|
||||
|
||||
.ss-set-property {
|
||||
width: 80px;
|
||||
height: 60rpx;
|
||||
line-height: normal;
|
||||
background: var(--ui-BG-Main);
|
||||
border-radius: 28rpx;
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
color: #fff;
|
||||
}
|
||||
uni-icons {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.uni-easyinput__content {
|
||||
border-radius: 0 10px 10px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.is-disabled {
|
||||
color: #333333;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-group {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
background-color: #f9f9f9;
|
||||
border-radius: 0 10px 10px 0;
|
||||
|
||||
.ss-set-property {
|
||||
width: 80px;
|
||||
height: 60rpx;
|
||||
line-height: normal;
|
||||
background: var(--ui-BG-Main);
|
||||
border-radius: 28rpx;
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue