2024-06-04 18:43:13 +08:00
|
|
|
<template>
|
2024-06-06 02:20:25 +08:00
|
|
|
<view class="property-list">
|
|
|
|
<uni-popup type="bottom" ref="propertyListPopupRef" background-color="#fff">
|
|
|
|
<view class="popup-header">
|
|
|
|
<view class="button-cancel" @click="onClosePopup">取消</view>
|
2024-08-28 18:36:22 +08:00
|
|
|
<view style="color: #c0c0c0; font-size: 12px">长按规格修改/删除</view>
|
2024-06-06 02:20:25 +08:00
|
|
|
<view class="button-link" @click="onConfirmPopup">确定</view>
|
|
|
|
</view>
|
|
|
|
<view class="popup-content">
|
2024-08-28 18:36:22 +08:00
|
|
|
<view
|
|
|
|
v-for="item in nowGoodsPropertyList"
|
|
|
|
:key="item.id"
|
|
|
|
:class="['property-item', item.checked ? 'active' : '']"
|
|
|
|
@tap="chooseProperty(item)"
|
|
|
|
@longpress="longPress(item)"
|
|
|
|
>
|
2024-06-06 02:20:25 +08:00
|
|
|
{{ item.name }}
|
|
|
|
</view>
|
2024-08-29 18:06:05 +08:00
|
|
|
<view
|
|
|
|
v-if="canEdit"
|
|
|
|
style="height: 60rpx; position: relative; top: 5px; display: inline-block"
|
|
|
|
@click="addPropertyClick"
|
|
|
|
>
|
2024-08-28 18:36:22 +08:00
|
|
|
<text style="color: #ff3300; font-size: 30px" class="cicon-add-round-o"></text>
|
|
|
|
</view>
|
2024-06-06 02:20:25 +08:00
|
|
|
</view>
|
|
|
|
</uni-popup>
|
2024-08-28 18:36:22 +08:00
|
|
|
<uni-popup ref="inputDialogRef" type="dialog">
|
|
|
|
<uni-popup-dialog
|
|
|
|
mode="input"
|
|
|
|
:title="propertyTitle"
|
|
|
|
v-model="inputFormdata.name"
|
|
|
|
placeholder="请输入商品规格"
|
|
|
|
:before-close="true"
|
|
|
|
@confirm="dialogInputConfirm"
|
|
|
|
@close="inputDialogRef.close()"
|
|
|
|
></uni-popup-dialog>
|
|
|
|
</uni-popup>
|
2024-06-06 02:20:25 +08:00
|
|
|
</view>
|
2024-06-04 18:43:13 +08:00
|
|
|
</template>
|
|
|
|
|
|
|
|
<script setup>
|
|
|
|
import { ref, computed, defineEmits, defineProps, defineExpose } from 'vue'
|
2024-06-05 18:58:12 +08:00
|
|
|
import peach from '@/peach'
|
2024-08-28 18:36:22 +08:00
|
|
|
import GoodsApi from '@/peach/api/trade/goods'
|
|
|
|
import { getGoodsProperty, canEdit } from '../js/sku'
|
|
|
|
import { cloneDeep } from 'lodash'
|
2024-06-04 18:43:13 +08:00
|
|
|
|
|
|
|
/**
|
|
|
|
* todo 底部高度配置
|
|
|
|
*/
|
|
|
|
|
|
|
|
const props = defineProps({
|
2024-06-06 02:20:25 +08:00
|
|
|
modelValue: {
|
|
|
|
default: () => [],
|
|
|
|
required: true,
|
|
|
|
type: Array,
|
|
|
|
},
|
|
|
|
goodsPropertyList: {
|
|
|
|
default: () => [],
|
|
|
|
required: true,
|
|
|
|
type: Array,
|
|
|
|
},
|
2024-06-04 18:43:13 +08:00
|
|
|
})
|
|
|
|
|
2024-06-06 02:20:25 +08:00
|
|
|
const nowGoodsPropertyList = ref([])
|
|
|
|
|
|
|
|
const emit = defineEmits(['update:modelValue', 'confirm'])
|
2024-06-04 18:43:13 +08:00
|
|
|
|
|
|
|
const propertyListPopupRef = ref()
|
|
|
|
|
|
|
|
const onClosePopup = () => {
|
2024-06-06 02:20:25 +08:00
|
|
|
propertyListPopupRef.value.close()
|
2024-06-04 18:43:13 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
function chooseProperty(item) {
|
2024-06-06 02:20:25 +08:00
|
|
|
item.checked = !item.checked
|
2024-06-04 18:43:13 +08:00
|
|
|
}
|
|
|
|
|
2024-08-28 18:36:22 +08:00
|
|
|
function longPress(item) {
|
|
|
|
if (canEdit) {
|
|
|
|
// 震动提示
|
|
|
|
uni.vibrateShort()
|
|
|
|
uni.showActionSheet({
|
|
|
|
itemList: ['编辑', '删除'],
|
|
|
|
success: async (res) => {
|
|
|
|
if (res.tapIndex === 0) {
|
|
|
|
propertyTitle.value = '编辑'
|
|
|
|
inputFormdata.value.id = item.id
|
|
|
|
inputFormdata.value.name = item.name
|
|
|
|
inputDialogRef.value.open()
|
|
|
|
}
|
|
|
|
if (res.tapIndex === 1) {
|
|
|
|
await GoodsApi.delProperty({ id: item.id })
|
|
|
|
await getGoodsProperty()
|
|
|
|
nowGoodsPropertyList.value = cloneDeep(props.goodsPropertyList)
|
|
|
|
}
|
|
|
|
},
|
|
|
|
})
|
|
|
|
}
|
|
|
|
}
|
2024-06-06 02:20:25 +08:00
|
|
|
|
2024-08-28 18:36:22 +08:00
|
|
|
function onConfirmPopup() {
|
2024-06-06 02:20:25 +08:00
|
|
|
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()
|
2024-06-04 18:43:13 +08:00
|
|
|
}
|
|
|
|
|
2024-08-28 18:36:22 +08:00
|
|
|
const propertyTitle = ref('新增')
|
|
|
|
const inputDialogRef = ref()
|
|
|
|
const inputFormdata = ref({
|
|
|
|
id: '',
|
|
|
|
name: '',
|
|
|
|
remark: '',
|
|
|
|
})
|
|
|
|
function addPropertyClick() {
|
|
|
|
propertyTitle.value = '新增'
|
|
|
|
inputFormdata.value.name = ''
|
2024-08-29 18:06:05 +08:00
|
|
|
inputFormdata.value.id = ''
|
2024-08-28 18:36:22 +08:00
|
|
|
inputDialogRef.value.open()
|
|
|
|
}
|
|
|
|
|
|
|
|
async function dialogInputConfirm(value) {
|
|
|
|
if (!value) {
|
|
|
|
peach.$helper.toast('请输入商品属性')
|
|
|
|
return
|
|
|
|
}
|
|
|
|
if (inputFormdata.value.id) {
|
|
|
|
await GoodsApi.editProperty(inputFormdata.value)
|
|
|
|
} else {
|
|
|
|
await GoodsApi.createProperty(inputFormdata.value)
|
|
|
|
}
|
|
|
|
await getGoodsProperty()
|
|
|
|
inputDialogRef.value.close()
|
|
|
|
nowGoodsPropertyList.value = cloneDeep(props.goodsPropertyList)
|
|
|
|
}
|
|
|
|
|
2024-06-04 18:43:13 +08:00
|
|
|
function onOpen() {
|
2024-06-06 02:20:25 +08:00
|
|
|
nowGoodsPropertyList.value = cloneDeep(props.goodsPropertyList)
|
|
|
|
propertyListPopupRef.value.open('bottom')
|
2024-06-04 18:43:13 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
defineExpose({
|
2024-06-06 02:20:25 +08:00
|
|
|
onOpen,
|
2024-06-04 18:43:13 +08:00
|
|
|
})
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
.property-list {
|
2024-06-06 02:20:25 +08:00
|
|
|
.popup-content {
|
|
|
|
height: 500rpx;
|
|
|
|
padding: 40rpx;
|
2024-06-04 18:43:13 +08:00
|
|
|
|
2024-06-06 02:20:25 +08:00
|
|
|
.property-item {
|
2024-08-29 18:06:05 +08:00
|
|
|
display: inline-block;
|
|
|
|
margin-right: 10px;
|
|
|
|
margin-bottom: 10px;
|
2024-06-06 02:20:25 +08:00
|
|
|
text-align: center;
|
|
|
|
line-height: 60rpx;
|
|
|
|
height: 60rpx;
|
|
|
|
padding: 0 10px;
|
|
|
|
border-radius: 10px;
|
|
|
|
background-color: var(--ui-BG-4);
|
2024-06-04 18:43:13 +08:00
|
|
|
}
|
2024-06-06 02:20:25 +08:00
|
|
|
|
|
|
|
.active {
|
|
|
|
color: #fff;
|
|
|
|
background-color: var(--ui-BG-Main);
|
2024-06-04 18:43:13 +08:00
|
|
|
}
|
2024-06-06 02:20:25 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
.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;
|
|
|
|
}
|
2024-06-04 18:43:13 +08:00
|
|
|
}
|
|
|
|
</style>
|