diff --git a/src/components/model-shop-list/index.vue b/src/components/model-shop-list/index.vue index 86fb8f10..0ec57628 100644 --- a/src/components/model-shop-list/index.vue +++ b/src/components/model-shop-list/index.vue @@ -106,13 +106,9 @@ const props = defineProps({ default: true, } }); -// 用于页面判断显示 -const state = reactive({ - form: props.value?.content || {}, - new_style: props.value?.style || {}, -}); -// 如果需要解构,确保使用toRefs -const { form, new_style } = toRefs(state); + +const form = computed(() => props.value?.content || {}); +const new_style = computed(() => props.value?.style || {}); // 目前显示假数据,日后通过分类或者选择的商品来显示真实数据 interface product_list { diff --git a/src/components/model-shop-tabs/index.vue b/src/components/model-shop-tabs/index.vue index e01168e8..55a6ac70 100644 --- a/src/components/model-shop-tabs/index.vue +++ b/src/components/model-shop-tabs/index.vue @@ -17,31 +17,27 @@ const props = defineProps({ }, }, }); -// 用于页面判断显示 -const state = reactive({ - form: props.value.content, - new_style: props.value.style, -}); -// 如果需要解构,确保使用toRefs -const { form, new_style } = toRefs(state); -const tabs_list = ref({}); +const style_container = ref(''); +const tabs_list = ref(props.value); -watchEffect(() => { - tabs_list.value = { - content: { - ...toRefs(form.value), - ...toRefs(form.value.tabs_list[0]), - }, - style: { - ...toRefs(new_style.value), - } - } -}) -console.log(tabs_list.value); - -// 公共样式 -const style_container = computed(() => common_styles_computer(new_style.value.common_style)); +watch(tabs_list.value, (val) => { + const new_style = val?.style; + let new_data = val; + // 产品的值 + new_data.content.product_check = new_data.content.tabs_list[0].product_check; + new_data.content.goods_category_ids = new_data.content.tabs_list[0].goods_category_ids; + new_data.content.goods_brand_ids = new_data.content.tabs_list[0].goods_brand_ids; + new_data.content.number = new_data.content.tabs_list[0].number; + new_data.content.is_price_solo = new_data.content.tabs_list[0].is_price_solo; + new_data.content.sort = new_data.content.tabs_list[0].sort; + new_data.content.sort_rules = new_data.content.tabs_list[0].sort_rules; + new_data.content.product_list = new_data.content.tabs_list[0].product_list; + + tabs_list.value = new_data; + // 公共样式 + style_container.value += common_styles_computer(new_style.common_style); +},{ immediate: true, deep: true });