老师，有关代码复用的问题

相关代码：CartView.vue

<template>
<div class="wrapper">
<div class="title">我的全部购物车（2）</div>
<div class="product">
<div class="product__title">{{ productListOne.shopName }}</div>
<div class="product__content" :style="showCart ? ShowCartList : ''">
<template v-for="item in productListOne.productList" :key="item._id">
<div class="product__content__item" v-if="item.count > 0">
<img
class="product__content__item__img"
:src="item.imgUrl"
alt=""
/>
<div class="product__content__item__detail">
<h4 class="product__content__item__title">{{ item.name }}</h4>
<p class="product__content__item__price">
<span class="product__content__item__yen"
>&yen;{{ item.price }} * {{ item.count }}</span
>
<span class="product__content__item__origin"
>&yen;{{ (item.price * item.count).toFixed(2) }}</span
>
</p>
</div>
</div>
</template>
</div>
<div class="product__total" @click="handleHideBtnClick">
共计{{ total }}件/1.4kg
<span>箭头</span>
</div>
</div>
<div class="product">
<div class="product__title">{{ productListTwo.shopName }}</div>
<div class="product__content">
<template v-for="item in productListTwo.productList" :key="item._id">
<div class="product__content__item" v-if="item.count > 0">
<img
class="product__content__item__img"
:src="item.imgUrl"
alt=""
/>
<div class="product__content__item__detail">
<h4 class="product__content__item__title">{{ item.name }}</h4>
<p class="product__content__item__price">
<span class="product__content__item__yen"
>&yen;{{ item.price }} * {{ item.count }}</span
>
<span class="product__content__item__origin"
>&yen;{{ (item.price * item.count).toFixed(2) }}</span
>
</p>
</div>
</div>
</template>
</div>
</div>
</div>
<DockView :currentIndex="1" />
</template>

<script>
import DockView from "../../components/DockView";
import { useStore } from "vuex";
import { ref } from "vue";
import { useCommonCartEffect } from "../../effects/catEffects";

const ShowCartList = {
height: "1.08rem",
overflow: "hidden",
marginBottom: ".16rem",
};

export default {
name: "CartView",
components: { DockView },
setup() {
const store = useStore();

const shopIdOne = 1;
const shopIdTwo = 2;

const productListOne = store.state.cartList[shopIdOne];
const productListTwo = store.state.cartList[shopIdTwo];

const showCart = ref(true);
const handleHideBtnClick = () => {
showCart.value = !showCart.value;
};

const { calculations } = useCommonCartEffect(shopIdOne);
const { total } = calculations.value;

return {
productListOne,
productListTwo,
handleHideBtnClick,
showCart,
ShowCartList,
total,
};
},
};
</script>

<style lang="scss" scoped>
@import "../../style/viriables.scss";
@import "../../style/mixins.scss";
.wrapper {
position: absolute;
overflow-y: scroll;
top: 0;
left: 0;
bottom: 0.49rem;
right: 0;
background: #f5f5f5;
padding: 0 0.16rem;
}

.title {
height: 0.44rem;
background-color: #fff;
line-height: 0.44rem;
text-align: center;
font-size: 16px;
color: #333333;
margin: 0 -0.18rem 0.16rem -0.18rem;
}

.product {
overflow-y: scroll;
flex: 1;
padding: 0.12rem 0.16rem 0 0.16rem;
background: #ffffff;
border-radius: 0.04rem;
margin-bottom: 0.16rem;
&__title {
font-size: 0.16rem;
line-height: 0.2rem;
margin: 0 0 0.16rem 0;
}
&__content {
&__item {
position: relative;
display: flex;
margin: 0 0 0.16rem 0;
&__img {
width: 0.46rem;
height: 0.46rem;
margin-right: 0.16rem;
}
&__detail {
overflow: hidden;
flex: 1;
color: $content-fontcolor;
}
&__title {
margin: 0 0 0.06rem 0;
font-size: 14px;
color: #333333;
line-height: 0.2rem;
}
&__price {
display: flex;
margin: 0;
line-height: 0.2rem;
}
&__yen {
flex: 1;
font-size: 0.12rem;
color: #e93b3b;
}
&__origin {
line-height: 0.2rem;
font-size: 0.12rem;
color: #000000;
}
}
}
&__total {
line-height: 0.28rem;
background: #f5f5f5;
font-size: 0.14rem;
color: #999999;
margin-bottom: 0.16rem;
text-align: center;
}
}
</style>