<template> <div class="address-wrapper"> <i v-if="$route.params.owner === 'sell'" class="address-icon back-address-icon" ></i> <i v-else class="address-icon"></i> <div> <p class="consignee"> {{ isSell ? `回寄地址: ${userAddress.consignee}` : userAddress.consignee }} </p> <p class="area">{{ userAddress.area }}</p> <p class="mobile">{{ userAddress.mobile }}</p> </div> </div> </template> <script> import { createNamespacedHelpers } from "vuex"; const { mapGetters } = createNamespacedHelpers("order/orderDetail"); export default { computed: { ...mapGetters(["userAddress"]), isSell() { const { owner } = this.$route.params; return owner === "sell"; } } }; </script> <style lang="scss" scoped> .address-wrapper { display: flex; align-items: center; .consignee { font-size: 32px; font-weight: bold; } .area { color: #999; margin: 12px 0; } .mobile { font: 28px; font-weight: bold; } .address-icon { width: 48px; height: 48px; display: block; background-size: contain; margin-right: 40px; background-image: url("~statics/image/order/addr-icon@3x.png"); } .back-address-icon { background-image: url("~statics/image/order/blackAddress@3x.png"); } } </style>