feat(商品属性): 多 sku
This commit is contained in:
unknown
parent
b10f8458af
commit
b999d59bfc
|
|
@ -1,43 +1,21 @@
|
|||
<template>
|
||||
<pb-layout
|
||||
class="product-list"
|
||||
title="产品"
|
||||
navbar="normal"
|
||||
tabbar="/pages/index/product"
|
||||
:bgStyle="bgStyle"
|
||||
opacityBgUi="bg-white"
|
||||
color="black"
|
||||
>
|
||||
<view v-if="state.pagination.total > 0" class="goods-list ss-m-t-20">
|
||||
<view class="ss-p-l-20 ss-p-r-20 ss-m-b-20" v-for="item in state.pagination.list" :key="item.id">
|
||||
<p-goods-column
|
||||
size="lg"
|
||||
:data="item"
|
||||
:topRadius="10"
|
||||
:bottomRadius="10"
|
||||
@click="peach.$router.go('/pages/product/manageGoods', { id: item.id, mark: 'detail' })"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
<pb-layout class="product-list" title="产品" navbar="normal" tabbar="/pages/index/product" :bgStyle="bgStyle"
|
||||
opacityBgUi="bg-white" color="black">
|
||||
<view v-if="state.pagination.total > 0" class="goods-list ss-m-t-20">
|
||||
<view class="ss-p-l-20 ss-p-r-20 ss-m-b-20" v-for="item in state.pagination.list" :key="item.id">
|
||||
<p-goods-column size="lg" :data="item" :topRadius="10" :bottomRadius="10"
|
||||
@click="peach.$router.go('/pages/product/manageGoods', { id: item.id, mark: 'detail' })" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<uni-load-more
|
||||
v-if="state.pagination.total > 0"
|
||||
:status="state.loadStatus"
|
||||
:content-text="{
|
||||
contentdown: '上拉加载更多',
|
||||
}"
|
||||
@click="loadMore"
|
||||
/>
|
||||
<uni-load-more v-if="state.pagination.total > 0" :status="state.loadStatus" :content-text="{
|
||||
contentdown: '上拉加载更多',
|
||||
}" @click="loadMore" />
|
||||
|
||||
<view class="_icon-add-round add-product" @click="addGoods"></view>
|
||||
<view class="_icon-add-round add-product" @click="addGoods"></view>
|
||||
|
||||
<p-empty
|
||||
v-if="state.pagination.total === 0"
|
||||
icon="/static/soldout-empty.png"
|
||||
text="暂无产品"
|
||||
bgColor="transparent"
|
||||
/>
|
||||
</pb-layout>
|
||||
<p-empty v-if="state.pagination.total === 0" icon="/static/soldout-empty.png" text="暂无产品" bgColor="transparent" />
|
||||
</pb-layout>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
|
@ -49,165 +27,167 @@ import _ from 'lodash'
|
|||
import { resetPagination } from '@/peach/utils'
|
||||
|
||||
const bgStyle = {
|
||||
backgroundImage: '',
|
||||
backgroundColor: 'var(--ui-BG-1)',
|
||||
description: '',
|
||||
backgroundImage: '',
|
||||
backgroundColor: 'var(--ui-BG-1)',
|
||||
description: '',
|
||||
}
|
||||
|
||||
const state = ref({
|
||||
pagination: {
|
||||
list: [],
|
||||
total: 0,
|
||||
pageNo: 1,
|
||||
pageSize: 6,
|
||||
name: '',
|
||||
createTime: [],
|
||||
},
|
||||
loadStatus: '',
|
||||
pagination: {
|
||||
list: [],
|
||||
total: 0,
|
||||
pageNo: 1,
|
||||
pageSize: 6,
|
||||
name: '',
|
||||
createTime: [],
|
||||
},
|
||||
loadStatus: '',
|
||||
})
|
||||
|
||||
function emptyList() {
|
||||
resetPagination(state.value.pagination)
|
||||
resetPagination(state.value.pagination)
|
||||
}
|
||||
|
||||
function onSearch() {
|
||||
emptyList()
|
||||
getList()
|
||||
emptyList()
|
||||
getList()
|
||||
}
|
||||
|
||||
async function getList() {
|
||||
let { data } = await GoodApi.getProductList({
|
||||
pageNo: state.value.pagination.pageNo,
|
||||
pageSize: state.value.pagination.pageSize,
|
||||
})
|
||||
let { data } = await GoodApi.getProductList({
|
||||
pageNo: state.value.pagination.pageNo,
|
||||
pageSize: state.value.pagination.pageSize,
|
||||
})
|
||||
|
||||
state.value.pagination.list = _.concat(state.value.pagination.list, data.list)
|
||||
state.value.pagination.total = data.total
|
||||
let currentPageTotal = state.value.pagination.length
|
||||
state.value.pagination.list = _.concat(state.value.pagination.list, data.list)
|
||||
state.value.pagination.total = data.total
|
||||
let currentPageTotal = state.value.pagination.length
|
||||
|
||||
state.value.loadStatus = currentPageTotal < state.value.pagination.total ? 'more' : 'noMore'
|
||||
state.value.loadStatus = currentPageTotal < state.value.pagination.total ? 'more' : 'noMore'
|
||||
}
|
||||
|
||||
function addGoods() {
|
||||
peach.$router.go('/pages/product/manageGoods')
|
||||
peach.$router.go('/pages/product/manageGoods', {
|
||||
title: '添加商品'
|
||||
})
|
||||
}
|
||||
|
||||
function loadMore() {
|
||||
if (state.value.loadStatus === 'noMore') {
|
||||
return
|
||||
}
|
||||
state.value.pagination.pageNo++
|
||||
getList()
|
||||
if (state.value.loadStatus === 'noMore') {
|
||||
return
|
||||
}
|
||||
state.value.pagination.pageNo++
|
||||
getList()
|
||||
}
|
||||
|
||||
onLoad(async (options) => {
|
||||
getList()
|
||||
getList()
|
||||
})
|
||||
|
||||
onReachBottom(() => {
|
||||
loadMore()
|
||||
loadMore()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.product-list {
|
||||
.add-product {
|
||||
position: fixed;
|
||||
color: var(--ui-BG-Main);
|
||||
bottom: 70px;
|
||||
right: 20px;
|
||||
font-size: 80rpx;
|
||||
.add-product {
|
||||
position: fixed;
|
||||
color: var(--ui-BG-Main);
|
||||
bottom: 70px;
|
||||
right: 20px;
|
||||
font-size: 80rpx;
|
||||
}
|
||||
|
||||
.goods-list-box {
|
||||
width: 50%;
|
||||
box-sizing: border-box;
|
||||
|
||||
.left-list {
|
||||
margin-right: 10rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.goods-list-box {
|
||||
width: 50%;
|
||||
box-sizing: border-box;
|
||||
.right-list {
|
||||
margin-left: 10rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.left-list {
|
||||
margin-right: 10rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.right-list {
|
||||
margin-left: 10rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
.goods-box {
|
||||
&:nth-last-of-type(1) {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.goods-box {
|
||||
&:nth-last-of-type(1) {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
&:nth-child(2n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-child(2n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
.list-icon {
|
||||
width: 80rpx;
|
||||
|
||||
.sicon-goods-card {
|
||||
font-size: 40rpx;
|
||||
}
|
||||
|
||||
.list-icon {
|
||||
width: 80rpx;
|
||||
.sicon-goods-list {
|
||||
font-size: 40rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.sicon-goods-card {
|
||||
font-size: 40rpx;
|
||||
}
|
||||
.goods-card {
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
|
||||
.sicon-goods-list {
|
||||
font-size: 40rpx;
|
||||
}
|
||||
.list-filter-tabs {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.filter-list-box {
|
||||
padding: 28rpx 52rpx;
|
||||
|
||||
.filter-item {
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
line-height: normal;
|
||||
margin-bottom: 24rpx;
|
||||
|
||||
&:nth-last-child(1) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.goods-card {
|
||||
margin-left: 20rpx;
|
||||
.filter-item-active {
|
||||
color: var(--ui-BG-Main);
|
||||
}
|
||||
}
|
||||
|
||||
.tab-item {
|
||||
height: 50px;
|
||||
position: relative;
|
||||
z-index: 11;
|
||||
|
||||
.tab-title {
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
.list-filter-tabs {
|
||||
background-color: #fff;
|
||||
.cur-tab-title {
|
||||
font-weight: $font-weight-bold;
|
||||
}
|
||||
|
||||
.filter-list-box {
|
||||
padding: 28rpx 52rpx;
|
||||
|
||||
.filter-item {
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
line-height: normal;
|
||||
margin-bottom: 24rpx;
|
||||
|
||||
&:nth-last-child(1) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.filter-item-active {
|
||||
color: var(--ui-BG-Main);
|
||||
}
|
||||
}
|
||||
|
||||
.tab-item {
|
||||
height: 50px;
|
||||
position: relative;
|
||||
z-index: 11;
|
||||
|
||||
.tab-title {
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
.cur-tab-title {
|
||||
font-weight: $font-weight-bold;
|
||||
}
|
||||
|
||||
.tab-line {
|
||||
width: 60rpx;
|
||||
height: 6rpx;
|
||||
border-radius: 6rpx;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
bottom: 10rpx;
|
||||
background-color: var(--ui-BG-Main);
|
||||
z-index: 12;
|
||||
}
|
||||
.tab-line {
|
||||
width: 60rpx;
|
||||
height: 6rpx;
|
||||
border-radius: 6rpx;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
bottom: 10rpx;
|
||||
background-color: var(--ui-BG-Main);
|
||||
z-index: 12;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -11,29 +11,31 @@
|
|||
</template>
|
||||
|
||||
<uni-forms-item label="商品封面图" name="picUrl" label-position="top">
|
||||
<p-uploader v-model:url="formData.picUrl" fileMediatype="image" limit="1" mode="grid"
|
||||
<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" placeholder="请输入商品条码" />
|
||||
<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" placeholder="请输入商品销售价" />
|
||||
<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" placeholder="请输入商品销售价" />
|
||||
<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" placeholder="请输入商品销售价" />
|
||||
<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" placeholder="请输入商品库存" />
|
||||
<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" placeholder="请输入商品重量" />
|
||||
<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" placeholder="请输入商品体积" />
|
||||
<uni-easyinput type="number" trim="all" v-model="formData.volume" :disabled="!canEdit" placeholder="请输入商品体积" />
|
||||
</uni-forms-item>
|
||||
</uni-forms>
|
||||
</div>
|
||||
|
|
@ -42,6 +44,7 @@
|
|||
<script setup>
|
||||
import { ref, watch, computed, defineProps } from 'vue'
|
||||
import peach from '@/peach'
|
||||
import { canEdit } from '../js/sku';
|
||||
const props = defineProps({
|
||||
skus: {
|
||||
type: Array,
|
||||
|
|
@ -53,6 +56,11 @@ 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 })
|
||||
|
||||
|
|
|
|||
|
|
@ -1,84 +1,82 @@
|
|||
<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(sitem)"
|
||||
:class="['item', sitem.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(sitem)"
|
||||
:class="['item', sitem.checked ? 'active' : '']">{{ sitem.name }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { defineProps, defineEmits, ref, computed } from 'vue'
|
||||
import { goodsPropertyList } from '../js/sku'
|
||||
import { goodsPropertyList, canEdit } from '../js/sku'
|
||||
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
goodsPropertyList: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
modelValue: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
goodsPropertyList: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
})
|
||||
|
||||
const emit = defineEmits(['changeSubProperty'])
|
||||
|
||||
function chooseProperty(item) {
|
||||
if (canEdit.value) {
|
||||
item.checked = !item.checked
|
||||
emit('changeSubProperty')
|
||||
}
|
||||
}
|
||||
</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,163 +1,179 @@
|
|||
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);
|
||||
|
||||
// 多属性商品 sku 列表
|
||||
const skus = ref([])
|
||||
const skus = ref([]);
|
||||
|
||||
const propertyList = ref([])
|
||||
const propertyList = ref([]);
|
||||
|
||||
const goodsPropertyList = ref([])
|
||||
const goodsPropertyList = ref([]);
|
||||
|
||||
const propertyListRef = ref(null)
|
||||
const propertyListRef = ref(null);
|
||||
|
||||
const canEdit = computed(() => peach.$store("trade").canEdit);
|
||||
|
||||
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.value ? 1 : 0
|
||||
pickerRef.value.onOpen([index])
|
||||
if (canEdit.value) {
|
||||
let index = specType.value ? 1 : 0;
|
||||
pickerRef.value.onOpen([index]);
|
||||
}
|
||||
}
|
||||
|
||||
async function onPropertyConfirm(e) {
|
||||
await getGoodsProperty()
|
||||
console.log(e)
|
||||
await getGoodsProperty();
|
||||
console.log(e);
|
||||
}
|
||||
|
||||
function onConfirm() {
|
||||
console.log(skus.value);
|
||||
}
|
||||
|
||||
async function getGoodsProperty() {
|
||||
let { data } = await GoodsApi.getHistoryProperty()
|
||||
let { data } = await GoodsApi.getHistoryProperty();
|
||||
|
||||
// 把 propertyList 中 id 相同的属性合并，并去重
|
||||
propertyList.value = peach.$store('trade').selectedProperty
|
||||
// 把 propertyList 中 id 相同的属性合并，并去重
|
||||
propertyList.value = peach.$store("trade").selectedProperty;
|
||||
|
||||
console.log(propertyList.value)
|
||||
console.log(propertyList.value);
|
||||
|
||||
// 根据已经选择数据，设置默认选中
|
||||
data.forEach((item) => {
|
||||
// 判断属性是否已经选中
|
||||
let propertyParent = propertyList.value.find((sitem) => sitem?.id === item.id)
|
||||
// 根据已经选择数据，设置默认选中
|
||||
data.forEach((item) => {
|
||||
// 判断属性是否已经选中
|
||||
let propertyParent = propertyList.value.find(
|
||||
(sitem) => sitem?.id === item.id
|
||||
);
|
||||
|
||||
item.checked = propertyParent ? true : false
|
||||
item.checked = propertyParent ? true : false;
|
||||
|
||||
// 如果属性已经选中，查询子类中是否有选中
|
||||
if (item.checked) {
|
||||
item.propertyValues.forEach((child) => {
|
||||
let childResult = propertyParent?.children.some((schild) => schild === child.id)
|
||||
child.checked = childResult ? true : false
|
||||
})
|
||||
}
|
||||
})
|
||||
// 如果属性已经选中，查询子类中是否有选中
|
||||
if (item.checked) {
|
||||
item.propertyValues.forEach((child) => {
|
||||
let childResult = propertyParent?.children.some(
|
||||
(schild) => schild === child.id
|
||||
);
|
||||
child.checked = childResult ? true : false;
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
goodsPropertyList.value = data
|
||||
console.log(goodsPropertyList.value)
|
||||
goodsPropertyList.value = data;
|
||||
console.log(goodsPropertyList.value);
|
||||
}
|
||||
|
||||
function changeSubProperty() {
|
||||
// 修改子属性状态，需要同步更新 skus 的显示
|
||||
console.log(goodsPropertyList.value)
|
||||
// 过滤父属性 checked 选项，深拷贝避免后面循环改变元数据内容
|
||||
let temp = JSON.parse(JSON.stringify(goodsPropertyList.value.filter((item) => item.checked)))
|
||||
temp.forEach((item) => {
|
||||
item.propertyValues = item.propertyValues.filter((child) => child.checked)
|
||||
})
|
||||
// 修改子属性状态，需要同步更新 skus 的显示
|
||||
console.log(goodsPropertyList.value);
|
||||
// 过滤父属性 checked 选项，深拷贝避免后面循环改变元数据内容
|
||||
let temp = JSON.parse(
|
||||
JSON.stringify(goodsPropertyList.value.filter((item) => item.checked))
|
||||
);
|
||||
temp.forEach((item) => {
|
||||
item.propertyValues = item.propertyValues.filter((child) => child.checked);
|
||||
});
|
||||
|
||||
let result = temp.map((item) => {
|
||||
return item.propertyValues.map((child) => ({
|
||||
propertyId: item.id,
|
||||
propertyName: item.name,
|
||||
valueId: child.id,
|
||||
valueName: child.name,
|
||||
}))
|
||||
})
|
||||
let result = temp.map((item) => {
|
||||
return item.propertyValues.map((child) => ({
|
||||
propertyId: item.id,
|
||||
propertyName: item.name,
|
||||
valueId: child.id,
|
||||
valueName: child.name,
|
||||
}));
|
||||
});
|
||||
|
||||
let tempSkus = []
|
||||
let tempSkus = [];
|
||||
|
||||
for (let item of reduceArr(result)) {
|
||||
let obj = {
|
||||
picUrl: '',
|
||||
barCode: '',
|
||||
price: 0,
|
||||
marketPrice: 0,
|
||||
costPrice: 0,
|
||||
stock: 0,
|
||||
weight: 0,
|
||||
volume: 0,
|
||||
properties: item,
|
||||
}
|
||||
tempSkus.push(obj)
|
||||
}
|
||||
for (let item of reduceArr(result)) {
|
||||
let obj = {
|
||||
picUrl: "",
|
||||
barCode: "",
|
||||
price: 0,
|
||||
marketPrice: 0,
|
||||
costPrice: 0,
|
||||
stock: 0,
|
||||
weight: 0,
|
||||
volume: 0,
|
||||
properties: item,
|
||||
};
|
||||
tempSkus.push(obj);
|
||||
}
|
||||
|
||||
skus.value = tempSkus
|
||||
skus.value = tempSkus;
|
||||
}
|
||||
|
||||
function reduceArr(arr) {
|
||||
return arr.reduce((acc, cur) => {
|
||||
let tempAcc = []
|
||||
return arr.reduce((acc, cur) => {
|
||||
let tempAcc = [];
|
||||
|
||||
if (acc.length < 1) {
|
||||
cur.forEach((item, index) => {
|
||||
if (tempAcc[index]) {
|
||||
tempAcc[index].push(item)
|
||||
} else {
|
||||
tempAcc[index] = [item]
|
||||
}
|
||||
})
|
||||
if (acc.length < 1) {
|
||||
cur.forEach((item, index) => {
|
||||
if (tempAcc[index]) {
|
||||
tempAcc[index].push(item);
|
||||
} else {
|
||||
acc.forEach((item, index) => {
|
||||
cur.forEach((sitem, sindex) => {
|
||||
tempAcc.push([...item, sitem])
|
||||
})
|
||||
})
|
||||
|
||||
if (cur.length < 1) {
|
||||
tempAcc = acc
|
||||
}
|
||||
tempAcc[index] = [item];
|
||||
}
|
||||
return tempAcc
|
||||
}, [])
|
||||
});
|
||||
} else {
|
||||
acc.forEach((item, index) => {
|
||||
cur.forEach((sitem, sindex) => {
|
||||
tempAcc.push([...item, sitem]);
|
||||
});
|
||||
});
|
||||
|
||||
if (cur.length < 1) {
|
||||
tempAcc = acc;
|
||||
}
|
||||
}
|
||||
return tempAcc;
|
||||
}, []);
|
||||
}
|
||||
|
||||
const specType = computed(() => peach.$store('trade').goodsInfo.specType)
|
||||
const specType = computed(() => peach.$store("trade").goodsInfo.specType);
|
||||
|
||||
function initial() {
|
||||
onLoad(() => {
|
||||
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()
|
||||
}
|
||||
})
|
||||
onLoad(() => {
|
||||
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,
|
||||
formData,
|
||||
onRDPickerConfirm,
|
||||
onPropertyConfirm,
|
||||
propertyList,
|
||||
showPropertyList,
|
||||
goodsPropertyList,
|
||||
changeSubProperty,
|
||||
}
|
||||
initial,
|
||||
canEdit,
|
||||
skus,
|
||||
pickerRef,
|
||||
pickerProperty,
|
||||
onConfirm,
|
||||
propertyListRef,
|
||||
formData,
|
||||
onRDPickerConfirm,
|
||||
onPropertyConfirm,
|
||||
propertyList,
|
||||
showPropertyList,
|
||||
goodsPropertyList,
|
||||
changeSubProperty,
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,22 +1,22 @@
|
|||
<template>
|
||||
<pb-layout class="manage-goods" title="发布商品" leftIcon="leftIcon" navbar="normal" :bgStyle="bgStyle"
|
||||
<pb-layout class="manage-goods" :title="goodsTitle" 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"
|
||||
<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="sliderPicUrls" required>
|
||||
<p-uploader v-model:url="formData.sliderPicUrls" fileMediatype="image" limit="6" mode="grid"
|
||||
:imageStyles="{ width: '168rpx', height: '168rpx' }" />
|
||||
<p-uploader v-model:url="formData.sliderPicUrls" :readonly="!canEdit" 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-easyinput type="text" trim="all" v-model="formData.name" :disabled="!canEdit" 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"
|
||||
<uni-easyinput type="text" v-model="formData.categoryText" :disabled="!canEdit" :styles="selfStyles"
|
||||
placeholderStyle="color:#8a8a8a" :clearable="false" :inputBorder="false" placeholder="请选择商品分类" disabled>
|
||||
<template v-slot:right>
|
||||
<uni-icons type="right" />
|
||||
|
|
@ -24,8 +24,8 @@
|
|||
</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>
|
||||
<uni-easyinput type="text" v-model="formData.brandText" :disabled="!canEdit" :styles="selfStyles"
|
||||
placeholderStyle="color:#8a8a8a" :clearable="false" :inputBorder="false" placeholder="请选择商品品牌" disabled>
|
||||
<template v-slot:right>
|
||||
<uni-icons type="right" />
|
||||
</template>
|
||||
|
|
@ -37,21 +37,25 @@
|
|||
</view>
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="商品关键词" name="keyword" required>
|
||||
<uni-easyinput type="text" v-model="formData.keyword" placeholder="请输入商品关键词" />
|
||||
<uni-easyinput type="text" v-model="formData.keyword" :disabled="!canEdit" placeholder="请输入商品关键词" />
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="商品简介" name="introduction" required>
|
||||
<uni-easyinput type="textarea" trim="all" autoHeight v-model="formData.introduction" placeholder="请输入商品简介" />
|
||||
<uni-easyinput type="textarea" :disabled="!canEdit" 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>
|
||||
:inputBorder="false" v-model="formData.deliveryText" :disabled="!canEdit" placeholder="请选择配送方式" disabled>
|
||||
<template v-slot:right>
|
||||
<uni-icons type="right" />
|
||||
</template>
|
||||
</uni-easyinput>
|
||||
</uni-forms-item>
|
||||
</uni-forms>
|
||||
<view @tap="onSubmit" v-if="canEdit">
|
||||
<button class="ss-reset-button submit-button ui-Shadow-Main">提交</button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<p-picker ref="pickerRef" :mode="pickerMode" :options-cols="optionsCols" @confirm="onRDPickerConfirm"></p-picker>
|
||||
|
|
@ -59,7 +63,7 @@
|
|||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { ref, computed } from 'vue'
|
||||
import { onLoad } from '@dcloudio/uni-app'
|
||||
import peach from '@/peach'
|
||||
import { handleTree } from '@/peach/utils'
|
||||
|
|
@ -183,11 +187,14 @@ const rules = {
|
|||
const formRef = ref(null)
|
||||
const pickerMode = ref('single')
|
||||
const popMark = ref('')
|
||||
const goodsTitle = ref('')
|
||||
const categoryList = ref([])
|
||||
const brandList = ref([])
|
||||
const optionsCols = ref([])
|
||||
const canEdit = computed(() => peach.$store('trade').canEdit)
|
||||
|
||||
function openPicker(mark, mode) {
|
||||
if (!canEdit.value) return
|
||||
pickerMode.value = mode
|
||||
popMark.value = mark
|
||||
if (mark === 'delivery') {
|
||||
|
|
@ -290,12 +297,12 @@ function onSubmit() {
|
|||
.then(async (res) => {
|
||||
let tempObj = { ...res }
|
||||
|
||||
if (formData.value.id) {
|
||||
tempObj.id = formData.value.id
|
||||
await GoodsApi.editProduct(tempObj)
|
||||
} else {
|
||||
await GoodsApi.addProduct(tempObj)
|
||||
}
|
||||
// if (formData.value.id) {
|
||||
// tempObj.id = formData.value.id
|
||||
// await GoodsApi.editProduct(tempObj)
|
||||
// } else {
|
||||
// await GoodsApi.addProduct(tempObj)
|
||||
// }
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log('err', err)
|
||||
|
|
@ -317,13 +324,28 @@ async function getBrandList() {
|
|||
onLoad(async (options) => {
|
||||
await getCategoryList()
|
||||
await getBrandList()
|
||||
|
||||
goodsTitle.value = options.title
|
||||
|
||||
if (options.id) {
|
||||
getProduct(options.id)
|
||||
peach.$store('trade').detailTag = options.mark
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@mixin 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;
|
||||
}
|
||||
|
||||
.manage-goods {
|
||||
.goods-form {
|
||||
margin: 40rpx;
|
||||
|
|
@ -355,10 +377,18 @@ onLoad(async (options) => {
|
|||
}
|
||||
}
|
||||
|
||||
.is-disabled {
|
||||
color: #333333;
|
||||
text-align: right;
|
||||
.is-direction-left {
|
||||
|
||||
.is-disabled {
|
||||
color: #333333;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.uni-forms-item__error {
|
||||
left: -160rpx !important;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.btn-group {
|
||||
|
|
@ -370,16 +400,17 @@ onLoad(async (options) => {
|
|||
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;
|
||||
@include ss-set-property
|
||||
}
|
||||
}
|
||||
|
||||
.submit-button {
|
||||
width: 100%;
|
||||
height: 80rpx;
|
||||
border-radius: 40rpx;
|
||||
background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,57 +1,45 @@
|
|||
<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"
|
||||
@changeSubProperty="changeSubProperty"
|
||||
></property-detail>
|
||||
<mutiple-sku :skus="skus"></mutiple-sku>
|
||||
</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 v-if="canEdit" class="ss-reset-button add-property" @tap="showPropertyList">+添加规格</button>
|
||||
<!-- 商品属性展示 -->
|
||||
<property-detail v-if="propertyList.length > 0" v-model="propertyList" :goodsPropertyList="goodsPropertyList"
|
||||
@changeSubProperty="changeSubProperty"></property-detail>
|
||||
<!-- 多规格商品 -->
|
||||
<mutiple-sku :skus="skus"></mutiple-sku>
|
||||
</template>
|
||||
|
||||
<template v-else>
|
||||
<SkuItem :skus="skus" />
|
||||
</template>
|
||||
<template v-else>
|
||||
<!-- 单规格商品 -->
|
||||
<SkuItem :skus="skus" />
|
||||
</template>
|
||||
|
||||
<p-picker ref="pickerRef" mode="single" :options-cols="SPEC_TYPE" @confirm="onRDPickerConfirm"></p-picker>
|
||||
<!-- 确认选择 -->
|
||||
<view style="padding: 0 40rpx 40rpx;" @tap="onConfirm" v-if="canEdit">
|
||||
<button class="ss-reset-button submit-button ui-Shadow-Main">提交</button>
|
||||
</view>
|
||||
|
||||
<PropertyList
|
||||
ref="propertyListRef"
|
||||
v-model="propertyList"
|
||||
:goodsPropertyList="goodsPropertyList"
|
||||
@confirm="onPropertyConfirm"
|
||||
/>
|
||||
</pb-layout>
|
||||
<!-- 商品规格 -->
|
||||
<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>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
|
@ -61,24 +49,25 @@ 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,
|
||||
skus,
|
||||
changeSubProperty,
|
||||
initial,
|
||||
canEdit,
|
||||
pickerRef,
|
||||
propertyListRef,
|
||||
onRDPickerConfirm,
|
||||
formData,
|
||||
propertyList,
|
||||
onPropertyConfirm,
|
||||
showPropertyList,
|
||||
goodsPropertyList,
|
||||
pickerProperty,
|
||||
skus,
|
||||
changeSubProperty,
|
||||
} from './js/sku'
|
||||
|
||||
const bgStyle = {
|
||||
backgroundImage: '',
|
||||
backgroundColor: '#fff',
|
||||
description: '',
|
||||
backgroundImage: '',
|
||||
backgroundColor: '#fff',
|
||||
description: '',
|
||||
}
|
||||
|
||||
initial()
|
||||
|
|
@ -86,49 +75,57 @@ 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;
|
||||
}
|
||||
|
||||
.submit-button {
|
||||
width: 100%;
|
||||
height: 80rpx;
|
||||
border-radius: 40rpx;
|
||||
background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,58 +1,46 @@
|
|||
<template>
|
||||
<view class="ss-goods-wrap">
|
||||
<view v-if="size === 'lg'" class="lg-goods-card ss-flex ss-col-stretch" :style="[elStyles]" @click="onClick">
|
||||
<image class="lg-img-box" :src="peach.$url.cdn(data.image || data.picUrl)" mode="aspectFill"></image>
|
||||
<view class="lg-goods-content ss-flex-1 ss-flex-col ss-row-between ss-p-b-10 ss-p-t-20">
|
||||
<view>
|
||||
<view
|
||||
v-if="goodsFields.title?.show || goodsFields.name?.show"
|
||||
class="lg-goods-title ss-line-2"
|
||||
:style="[{ color: titleColor }]"
|
||||
>
|
||||
{{ data.title || data.name }}
|
||||
</view>
|
||||
<view
|
||||
v-if="goodsFields.subtitle?.show || goodsFields.introduction?.show"
|
||||
class="lg-goods-subtitle ss-m-t-10 ss-line-1"
|
||||
:style="[{ color: subTitleColor, background: subTitleBackground }]"
|
||||
>
|
||||
{{ data.subtitle || data.introduction }}
|
||||
</view>
|
||||
</view>
|
||||
<view>
|
||||
<view class="ss-flex ss-col-bottom ss-m-t-10">
|
||||
<view
|
||||
v-if="goodsFields.price?.show"
|
||||
class="lg-goods-price ss-m-r-12 ss-flex ss-col-bottom font-OPPOSANS"
|
||||
:style="[{ color: goodsFields.price.color }]"
|
||||
>
|
||||
<text class="ss-font-24">{{ priceUnit }}</text>
|
||||
{{ isArray(data.price) ? fen2yuan(data.price[0]) : fen2yuan(data.price) }}
|
||||
</view>
|
||||
<view
|
||||
v-if="
|
||||
(goodsFields.original_price?.show || goodsFields.marketPrice?.show) &&
|
||||
(data.original_price > 0 || data.marketPrice > 0)
|
||||
"
|
||||
class="goods-origin-price ss-flex ss-col-bottom font-OPPOSANS"
|
||||
:style="[{ color: originPriceColor }]"
|
||||
>
|
||||
<text class="price-unit ss-font-20">{{ priceUnit }}</text>
|
||||
<view class="ss-m-l-8">{{ fen2yuan(data.marketPrice) }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="ss-m-t-8 ss-flex ss-col-center ss-flex-wrap">
|
||||
<view class="sales-text">{{ salesAndStock }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="ss-goods-wrap">
|
||||
<view v-if="size === 'lg'" class="lg-goods-card ss-flex ss-col-stretch" :style="[elStyles]" @click="onClick">
|
||||
<image class="lg-img-box" :src="peach.$url.cdn(data.image || data.picUrl)" mode="aspectFill"></image>
|
||||
<view class="lg-goods-content ss-flex-1 ss-flex-col ss-row-between ss-p-b-10 ss-p-t-20">
|
||||
<view>
|
||||
<view v-if="goodsFields.title?.show || goodsFields.name?.show" class="lg-goods-title ss-line-2"
|
||||
:style="[{ color: titleColor }]">
|
||||
{{ data.title || data.name }}
|
||||
</view>
|
||||
<view v-if="goodsFields.subtitle?.show || goodsFields.introduction?.show"
|
||||
class="lg-goods-subtitle ss-m-t-10 ss-line-1"
|
||||
:style="[{ color: subTitleColor, background: subTitleBackground }]">
|
||||
{{ data.subtitle || data.introduction }}
|
||||
</view>
|
||||
</view>
|
||||
<view>
|
||||
<view class="ss-flex ss-col-bottom ss-m-t-10">
|
||||
<view v-if="goodsFields.price?.show" class="lg-goods-price ss-m-r-12 ss-flex ss-col-bottom font-OPPOSANS"
|
||||
:style="[{ color: goodsFields.price.color }]">
|
||||
<text class="ss-font-24">{{ priceUnit }}</text>
|
||||
{{ isArray(data.price) ? fen2yuan(data.price[0]) : fen2yuan(data.price) }}
|
||||
</view>
|
||||
<view v-if="
|
||||
(goodsFields.original_price?.show || goodsFields.marketPrice?.show) &&
|
||||
(data.original_price > 0 || data.marketPrice > 0)
|
||||
" class="goods-origin-price ss-flex ss-col-bottom font-OPPOSANS" :style="[{ color: originPriceColor }]">
|
||||
<text class="price-unit ss-font-20">{{ priceUnit }}</text>
|
||||
<view class="ss-m-l-8">{{ fen2yuan(data.marketPrice) }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="ss-m-t-8 ss-flex ss-col-center ss-flex-wrap">
|
||||
<view class="sales-text">{{ salesAndStock }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="ss-flex ss-row-around" :style="btnStyles">
|
||||
<button class="ss-reset-button btn-group" @click="clickGoods('detail')">详情</button>
|
||||
<button class="ss-reset-button btn-group" @click="clickGoods('edit')">编辑</button>
|
||||
<button class="ss-reset-button btn-group btn-del" @click="clickGoods('del')">删除</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="ss-flex ss-row-around" :style="btnStyles">
|
||||
<button class="ss-reset-button btn-group" @click="clickGoods('detail')">详情</button>
|
||||
<button class="ss-reset-button btn-group" @click="clickGoods('edit')">编辑</button>
|
||||
<button class="ss-reset-button btn-group btn-del" @click="clickGoods('del')">删除</button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
|
@ -63,167 +51,171 @@ import { fen2yuan, formatSales, formatStock } from '@/peach/hooks/useGoods'
|
|||
import { unix } from 'dayjs'
|
||||
|
||||
const props = defineProps({
|
||||
goodsFields: {
|
||||
type: [Array, Object],
|
||||
default() {
|
||||
return {
|
||||
price: { show: true },
|
||||
stock: { show: true },
|
||||
name: { show: true },
|
||||
introduction: { show: true },
|
||||
marketPrice: { show: true },
|
||||
salesCount: { show: true },
|
||||
}
|
||||
},
|
||||
},
|
||||
data: {
|
||||
type: Object,
|
||||
default: {},
|
||||
},
|
||||
size: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
originPriceColor: {
|
||||
type: String,
|
||||
default: '#C4C4C4',
|
||||
},
|
||||
topRadius: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
bottomRadius: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
priceUnit: {
|
||||
type: String,
|
||||
default: '￥',
|
||||
},
|
||||
titleColor: {
|
||||
type: String,
|
||||
default: '#333',
|
||||
},
|
||||
subTitleColor: {
|
||||
type: String,
|
||||
default: '#999999',
|
||||
},
|
||||
subTitleBackground: {
|
||||
type: String,
|
||||
default: '',
|
||||
goodsFields: {
|
||||
type: [Array, Object],
|
||||
default() {
|
||||
return {
|
||||
price: { show: true },
|
||||
stock: { show: true },
|
||||
name: { show: true },
|
||||
introduction: { show: true },
|
||||
marketPrice: { show: true },
|
||||
salesCount: { show: true },
|
||||
}
|
||||
},
|
||||
},
|
||||
data: {
|
||||
type: Object,
|
||||
default: {},
|
||||
},
|
||||
size: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
originPriceColor: {
|
||||
type: String,
|
||||
default: '#C4C4C4',
|
||||
},
|
||||
topRadius: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
bottomRadius: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
priceUnit: {
|
||||
type: String,
|
||||
default: '￥',
|
||||
},
|
||||
titleColor: {
|
||||
type: String,
|
||||
default: '#333',
|
||||
},
|
||||
subTitleColor: {
|
||||
type: String,
|
||||
default: '#999999',
|
||||
},
|
||||
subTitleBackground: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
})
|
||||
|
||||
const emits = defineEmits(['click'])
|
||||
|
||||
function onClick() {
|
||||
emits('click')
|
||||
emits('click')
|
||||
}
|
||||
|
||||
const elStyles = computed(() => {
|
||||
return {
|
||||
background: props.background,
|
||||
'border-top-left-radius': props.topRadius + 'px',
|
||||
'border-top-right-radius': props.topRadius + 'px',
|
||||
}
|
||||
return {
|
||||
background: props.background,
|
||||
'border-top-left-radius': props.topRadius + 'px',
|
||||
'border-top-right-radius': props.topRadius + 'px',
|
||||
}
|
||||
})
|
||||
|
||||
const btnStyles = computed(() => {
|
||||
return {
|
||||
background: '#fff',
|
||||
'border-bottom-left-radius': props.bottomRadius + 'px',
|
||||
'border-bottom-right-radius': props.bottomRadius + 'px',
|
||||
padding: '8px 0',
|
||||
}
|
||||
return {
|
||||
background: '#fff',
|
||||
'border-bottom-left-radius': props.bottomRadius + 'px',
|
||||
'border-bottom-right-radius': props.bottomRadius + 'px',
|
||||
padding: '8px 0',
|
||||
}
|
||||
})
|
||||
|
||||
// 格式化销量、库存信息
|
||||
const salesAndStock = computed(() => {
|
||||
let text = []
|
||||
if (props.goodsFields.salesCount?.show) {
|
||||
text.push(formatSales(props.data.sales_show_type, props.data.salesCount))
|
||||
}
|
||||
if (props.goodsFields.stock?.show) {
|
||||
text.push(formatStock(props.data.stock_show_type, props.data.stock))
|
||||
}
|
||||
return text.join(' | ')
|
||||
let text = []
|
||||
if (props.goodsFields.salesCount?.show) {
|
||||
text.push(formatSales(props.data.sales_show_type, props.data.salesCount))
|
||||
}
|
||||
if (props.goodsFields.stock?.show) {
|
||||
text.push(formatStock(props.data.stock_show_type, props.data.stock))
|
||||
}
|
||||
return text.join(' | ')
|
||||
})
|
||||
|
||||
function clickGoods(mark) {
|
||||
if (mark === 'detail' || mark === 'edit') {
|
||||
peach.$router.go('/pages/product/manageGoods', {
|
||||
id: props.data.id,
|
||||
mark: mark,
|
||||
})
|
||||
} else if (mark === 'del') {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '是否删除该商品？',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
}
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
if (mark === 'detail' || mark === 'edit') {
|
||||
peach.$router.go('/pages/product/manageGoods', {
|
||||
id: props.data.id,
|
||||
mark: mark,
|
||||
title: mark === 'detail' ? '商品详情' : '编辑商品'
|
||||
})
|
||||
} else if (mark === 'del') {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '是否删除该商品？',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
}
|
||||
},
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.ss-goods-wrap {
|
||||
.lg-goods-card {
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
background-color: $white;
|
||||
height: 280rpx;
|
||||
.lg-goods-card {
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
background-color: $white;
|
||||
height: 280rpx;
|
||||
|
||||
.lg-img-box {
|
||||
width: 280rpx;
|
||||
height: 280rpx;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.lg-goods-title {
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
// line-height: 36rpx;
|
||||
// width: 410rpx;
|
||||
}
|
||||
|
||||
.lg-goods-subtitle {
|
||||
font-size: 24rpx;
|
||||
font-weight: 400;
|
||||
color: #999999;
|
||||
// line-height: 30rpx;
|
||||
// width: 410rpx;
|
||||
}
|
||||
|
||||
.lg-goods-price {
|
||||
font-size: 30rpx;
|
||||
color: $red;
|
||||
line-height: 36rpx;
|
||||
}
|
||||
|
||||
.sales-text {
|
||||
display: table;
|
||||
font-size: 24rpx;
|
||||
transform: scale(0.8);
|
||||
margin-left: 0rpx;
|
||||
color: #c4c4c4;
|
||||
}
|
||||
.lg-img-box {
|
||||
width: 280rpx;
|
||||
height: 280rpx;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
.btn-group {
|
||||
width: 120rpx;
|
||||
height: 50rpx;
|
||||
background: var(--ui-BG-1);
|
||||
border-radius: 25rpx;
|
||||
font-size: 24rpx;
|
||||
color: #000;
|
||||
|
||||
.lg-goods-title {
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
// line-height: 36rpx;
|
||||
// width: 410rpx;
|
||||
}
|
||||
.btn-del {
|
||||
color: var(--ui-BG-Main);
|
||||
background-color: var(--ui-BG-Main-opacity-1);
|
||||
|
||||
.lg-goods-subtitle {
|
||||
font-size: 24rpx;
|
||||
font-weight: 400;
|
||||
color: #999999;
|
||||
// line-height: 30rpx;
|
||||
// width: 410rpx;
|
||||
}
|
||||
|
||||
.lg-goods-price {
|
||||
font-size: 30rpx;
|
||||
color: $red;
|
||||
line-height: 36rpx;
|
||||
}
|
||||
|
||||
.sales-text {
|
||||
display: table;
|
||||
font-size: 24rpx;
|
||||
transform: scale(0.8);
|
||||
margin-left: 0rpx;
|
||||
color: #c4c4c4;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-group {
|
||||
width: 120rpx;
|
||||
height: 50rpx;
|
||||
background: var(--ui-BG-1);
|
||||
border-radius: 25rpx;
|
||||
font-size: 24rpx;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.btn-del {
|
||||
color: var(--ui-BG-Main);
|
||||
background-color: var(--ui-BG-Main-opacity-1);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,47 +1,35 @@
|
|||
<template>
|
||||
<view class="custom-picker">
|
||||
<!-- 普通弹窗 -->
|
||||
<uni-popup type="bottom" ref="pickerPopupRef" 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">
|
||||
<picker-view
|
||||
:indicator-style="indicatorStyle"
|
||||
:value="pickerViewValue"
|
||||
@change="bindChange"
|
||||
class="picker-view"
|
||||
>
|
||||
<template v-if="mode === 'single'">
|
||||
<picker-view-column>
|
||||
<view
|
||||
class="item"
|
||||
v-for="(item, index) in props.optionsCols"
|
||||
:key="`${item.value}-${index}`"
|
||||
>{{ item.label }}</view
|
||||
>
|
||||
</picker-view-column>
|
||||
</template>
|
||||
<template v-else>
|
||||
<picker-view-column>
|
||||
<view
|
||||
class="item"
|
||||
v-for="(item, index) in props.optionsCols"
|
||||
:key="`${item.value}-${index}`"
|
||||
>{{ item.name }}</view
|
||||
>
|
||||
</picker-view-column>
|
||||
<picker-view-column>
|
||||
<view class="item" v-for="(item, index) in childrenList" :key="`${item.value}-${index}`">{{
|
||||
item.name
|
||||
}}</view>
|
||||
</picker-view-column>
|
||||
</template>
|
||||
</picker-view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
</view>
|
||||
<view class="custom-picker">
|
||||
<!-- 普通弹窗 -->
|
||||
<uni-popup type="bottom" ref="pickerPopupRef" 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">
|
||||
<picker-view :indicator-style="indicatorStyle" :value="pickerViewValue" @change="bindChange"
|
||||
class="picker-view">
|
||||
<template v-if="mode === 'single'">
|
||||
<picker-view-column>
|
||||
<view class="item" v-for="(item, index) in props.optionsCols" :key="`${item.value}-${index}`">{{
|
||||
item.label ?? item.name }}</view>
|
||||
</picker-view-column>
|
||||
</template>
|
||||
<template v-else>
|
||||
<picker-view-column>
|
||||
<view class="item" v-for="(item, index) in props.optionsCols" :key="`${item.value}-${index}`">{{ item.name
|
||||
}}</view>
|
||||
</picker-view-column>
|
||||
<picker-view-column>
|
||||
<view class="item" v-for="(item, index) in childrenList" :key="`${item.value}-${index}`">{{
|
||||
item.name
|
||||
}}</view>
|
||||
</picker-view-column>
|
||||
</template>
|
||||
</picker-view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
|
@ -49,20 +37,20 @@ import { defineEmits, defineProps, ref, onMounted, computed, defineExpose } from
|
|||
const pickerViewValue = ref([])
|
||||
const indicatorStyle = `height: 50px`
|
||||
const props = defineProps({
|
||||
// 传入pickerview列表 value label字段
|
||||
optionsCols: {
|
||||
default: () => [],
|
||||
required: true,
|
||||
type: Array,
|
||||
},
|
||||
mode: {
|
||||
type: String,
|
||||
default: 'single',
|
||||
},
|
||||
// 传入pickerview列表 value label字段
|
||||
optionsCols: {
|
||||
default: () => [],
|
||||
required: true,
|
||||
type: Array,
|
||||
},
|
||||
mode: {
|
||||
type: String,
|
||||
default: 'single',
|
||||
},
|
||||
})
|
||||
|
||||
const childrenList = computed(() => {
|
||||
return props.optionsCols[pickerViewValue.value[0]]?.children
|
||||
return props.optionsCols[pickerViewValue.value[0]]?.children
|
||||
})
|
||||
|
||||
// 暴露两个方法confirm change
|
||||
|
|
@ -76,8 +64,8 @@ const pickerPopupRef = ref(null)
|
|||
* @return {*}
|
||||
*/
|
||||
const onOpen = (defaultValue) => {
|
||||
pickerViewValue.value = defaultValue
|
||||
pickerPopupRef.value.open('bottom')
|
||||
pickerViewValue.value = defaultValue
|
||||
pickerPopupRef.value.open('bottom')
|
||||
}
|
||||
/**
|
||||
* @author: joey wong
|
||||
|
|
@ -86,17 +74,17 @@ const onOpen = (defaultValue) => {
|
|||
* @return {*}
|
||||
*/
|
||||
const bindChange = (e) => {
|
||||
pickerViewValue.value = e.detail.value
|
||||
pickerViewValue.value = e.detail.value
|
||||
|
||||
if (props.mode === 'multiple') {
|
||||
if (pickerViewValue.value[0] !== e.detail.value[0]) {
|
||||
pickerViewValue.value[1] = 0
|
||||
}
|
||||
if (props.mode === 'multiple') {
|
||||
if (pickerViewValue.value[0] !== e.detail.value[0]) {
|
||||
pickerViewValue.value[1] = 0
|
||||
}
|
||||
}
|
||||
|
||||
emit('change', {
|
||||
value: pickerViewValue.value,
|
||||
})
|
||||
emit('change', {
|
||||
value: pickerViewValue.value,
|
||||
})
|
||||
}
|
||||
/**
|
||||
* @author: joey wong
|
||||
|
|
@ -104,7 +92,7 @@ const bindChange = (e) => {
|
|||
* @return {*}
|
||||
*/
|
||||
const onClosePopup = () => {
|
||||
pickerPopupRef.value.close()
|
||||
pickerPopupRef.value.close()
|
||||
}
|
||||
/**
|
||||
* @author: joey wong
|
||||
|
|
@ -112,56 +100,61 @@ const onClosePopup = () => {
|
|||
* @return {*}
|
||||
*/
|
||||
const onConfirmPopup = () => {
|
||||
emit('confirm', {
|
||||
value: pickerViewValue.value,
|
||||
})
|
||||
onClosePopup()
|
||||
emit('confirm', {
|
||||
value: pickerViewValue.value,
|
||||
})
|
||||
onClosePopup()
|
||||
}
|
||||
defineExpose({
|
||||
onOpen,
|
||||
onOpen,
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.custom-picker {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&-text {
|
||||
margin-right: 5.7rpx;
|
||||
}
|
||||
|
||||
&-icon {
|
||||
width: 19rpx;
|
||||
height: 12rpx;
|
||||
margin-bottom: 3rpx;
|
||||
}
|
||||
|
||||
.popup-content {
|
||||
height: 500rpx;
|
||||
|
||||
.item {
|
||||
text-align: center;
|
||||
line-height: 34px;
|
||||
}
|
||||
}
|
||||
|
||||
.picker-view {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
.button-link {
|
||||
color: #1892ea;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.button-cancel {
|
||||
color: #888;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.popup-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&-text {
|
||||
margin-right: 5.7rpx;
|
||||
}
|
||||
|
||||
&-icon {
|
||||
width: 19rpx;
|
||||
height: 12rpx;
|
||||
margin-bottom: 3rpx;
|
||||
}
|
||||
|
||||
.popup-content {
|
||||
height: 500rpx;
|
||||
.item {
|
||||
text-align: center;
|
||||
line-height: 50px;
|
||||
}
|
||||
}
|
||||
.picker-view {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
justify-content: space-between;
|
||||
padding: 24rpx 38rpx 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -282,6 +282,7 @@ export default {
|
|||
return this.uploadFiles(files);
|
||||
},
|
||||
async setValue(newVal, oldVal) {
|
||||
|
||||
const newData = async (v) => {
|
||||
const reg = /cloud:\/\/([\w.]+\/?)\S*/;
|
||||
let url = '';
|
||||
|
|
@ -512,6 +513,7 @@ export default {
|
|||
* @param {Object} index
|
||||
*/
|
||||
delFile(index) {
|
||||
|
||||
this.$emit('delete', {
|
||||
tempFile: this.files[index],
|
||||
tempFilePath: this.files[index].url,
|
||||
|
|
@ -541,11 +543,13 @@ export default {
|
|||
setEmit() {
|
||||
let data = [];
|
||||
let updateUrl = [];
|
||||
// 单文件
|
||||
if (this.returnType === 'object') {
|
||||
data = this.backObject(this.files)[0];
|
||||
this.localValue = data ? data : null;
|
||||
updateUrl = data ? data.url : '';
|
||||
} else {
|
||||
// 多文件
|
||||
data = this.backObject(this.files);
|
||||
if (!this.localValue) {
|
||||
this.localValue = [];
|
||||
|
|
@ -568,16 +572,23 @@ export default {
|
|||
backObject(files) {
|
||||
let newFilesData = [];
|
||||
files.forEach((v) => {
|
||||
newFilesData.push({
|
||||
extname: v.extname,
|
||||
fileType: v.fileType,
|
||||
image: v.image,
|
||||
name: v.name,
|
||||
path: v.path,
|
||||
size: v.size,
|
||||
fileID: v.fileID,
|
||||
url: v.url,
|
||||
});
|
||||
if (v.fileID) {
|
||||
|
||||
newFilesData.push({
|
||||
extname: v.extname,
|
||||
fileType: v.fileType,
|
||||
image: v.image,
|
||||
name: v.name,
|
||||
path: v.path,
|
||||
size: v.size,
|
||||
fileID: v.fileID,
|
||||
url: v.url,
|
||||
});
|
||||
} else {
|
||||
newFilesData.push({
|
||||
url: v
|
||||
})
|
||||
}
|
||||
});
|
||||
return newFilesData;
|
||||
},
|
||||
|
|
|
|||
|
|
@ -69,6 +69,7 @@ export default {
|
|||
},
|
||||
computed: {
|
||||
list() {
|
||||
|
||||
if (typeof this.filesList === 'string') {
|
||||
if (this.filesList) {
|
||||
return [this.filesList];
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { ref } from "vue";
|
||||
import { ref, computed } from "vue";
|
||||
import { defineStore } from "pinia";
|
||||
|
||||
const useTradeStore = defineStore("trade", () => {
|
||||
|
|
@ -8,13 +8,21 @@ const useTradeStore = defineStore("trade", () => {
|
|||
// 商品信息
|
||||
const goodsInfo = ref(null);
|
||||
|
||||
// 详情标记
|
||||
const detailTag = ref("edit");
|
||||
|
||||
// 商品属性
|
||||
const skus = ref(null);
|
||||
|
||||
// 商品是否可编辑
|
||||
const canEdit = computed(() => (detailTag.value === "detail" ? false : true));
|
||||
|
||||
return {
|
||||
selectedProperty,
|
||||
goodsInfo,
|
||||
skus,
|
||||
canEdit,
|
||||
detailTag,
|
||||
};
|
||||
});
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue