feat: order跳转卖家主页
This commit is contained in:
@@ -1,104 +1,112 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onUnmounted, reactive, toRefs } from 'vue'
|
||||
const props = defineProps({
|
||||
url: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
name: {
|
||||
type: String,
|
||||
default: 'aaa'
|
||||
},
|
||||
price: {
|
||||
type: String,
|
||||
default: '111'
|
||||
},
|
||||
download: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
showPrice: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
})
|
||||
const emit = defineEmits(['addShopping', 'openDetail', 'download'])
|
||||
let data = reactive({})
|
||||
const addShopping = () => {
|
||||
if (props.download) {
|
||||
emit('download')
|
||||
} else {
|
||||
emit('addShopping')
|
||||
}
|
||||
}
|
||||
const openDetail = () => {
|
||||
emit('openDetail')
|
||||
}
|
||||
onMounted(() => {})
|
||||
onUnmounted(() => {})
|
||||
defineExpose({})
|
||||
const {} = toRefs(data)
|
||||
import { ref, onMounted, onUnmounted, reactive, toRefs } from 'vue'
|
||||
const props = defineProps({
|
||||
url: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
name: {
|
||||
type: String,
|
||||
default: 'aaa'
|
||||
},
|
||||
price: {
|
||||
type: [String, Number],
|
||||
default: ''
|
||||
},
|
||||
download: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
showPrice: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
})
|
||||
const emit = defineEmits(['addShopping', 'openDetail', 'download'])
|
||||
let data = reactive({})
|
||||
const addShopping = () => {
|
||||
if (props.download) {
|
||||
emit('download')
|
||||
} else {
|
||||
emit('addShopping')
|
||||
}
|
||||
}
|
||||
const openDetail = () => {
|
||||
emit('openDetail')
|
||||
}
|
||||
onMounted(() => {})
|
||||
onUnmounted(() => {})
|
||||
defineExpose({})
|
||||
const {} = toRefs(data)
|
||||
</script>
|
||||
<template>
|
||||
<div class="commodity-item" :class="{ 'is-download': download }">
|
||||
<img :src="props.url" alt="" @click="openDetail" />
|
||||
<div class="detail">
|
||||
<div class="text">
|
||||
<div class="name">
|
||||
{{ props.name }}
|
||||
</div>
|
||||
<div class="price" :class="{ 'is-download': download }" v-if="props.showPrice && props.price">
|
||||
{{ props.price }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn" @click="addShopping">
|
||||
<div class="text">
|
||||
<SvgIcon :name="download ? 'download' : 'add'" size="26" color="#232323"></SvgIcon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="commodity-item" :class="{ 'is-download': download }">
|
||||
<img :src="props.url" alt="" @click="openDetail" />
|
||||
<div class="detail">
|
||||
<div class="text">
|
||||
<div class="name">
|
||||
{{ props.name }}
|
||||
</div>
|
||||
<div
|
||||
class="price"
|
||||
:class="{ 'is-download': download }"
|
||||
v-if="props.showPrice && props.price"
|
||||
>
|
||||
{{ props.price }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn" @click="addShopping">
|
||||
<div class="text">
|
||||
<SvgIcon
|
||||
:name="download ? 'download' : 'add'"
|
||||
size="26"
|
||||
color="#232323"
|
||||
></SvgIcon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<style lang="less" scoped>
|
||||
.commodity-item {
|
||||
width: var(--commodity-width, 100%);
|
||||
&.is-download{
|
||||
img{
|
||||
cursor: initial;
|
||||
}
|
||||
}
|
||||
> img {
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
height: var(--commodity-height, auto);
|
||||
margin-bottom: var(--commodity-marginBottom, 1rem);
|
||||
}
|
||||
> .detail {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
> .text {
|
||||
color: #232323;
|
||||
> .name {
|
||||
font-family: 'KaiseiOpti-Regular';
|
||||
font-weight: 400;
|
||||
font-size: var(--commodity-name-fontSize, 1.6rem);
|
||||
line-height: var(--commodity-name-lineHeight, 2.3rem);
|
||||
margin-bottom: var(--commodity-name-marginBottom, 0rem);
|
||||
}
|
||||
> .price {
|
||||
font-family: 'KaiseiOpti-Regular';
|
||||
font-weight: 400;
|
||||
font-size: var(--commodity-price-fontSize, 1.4rem);
|
||||
line-height: var(--commodity-price-lineHeight, 2.3rem);
|
||||
&.is-download {
|
||||
color: #979797;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.btn {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.commodity-item {
|
||||
width: var(--commodity-width, 100%);
|
||||
&.is-download {
|
||||
img {
|
||||
cursor: initial;
|
||||
}
|
||||
}
|
||||
> img {
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
height: var(--commodity-height, auto);
|
||||
margin-bottom: var(--commodity-marginBottom, 1rem);
|
||||
}
|
||||
> .detail {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
> .text {
|
||||
color: #232323;
|
||||
> .name {
|
||||
font-family: 'KaiseiOpti-Regular';
|
||||
font-weight: 400;
|
||||
font-size: var(--commodity-name-fontSize, 1.6rem);
|
||||
line-height: var(--commodity-name-lineHeight, 2.3rem);
|
||||
margin-bottom: var(--commodity-name-marginBottom, 0rem);
|
||||
}
|
||||
> .price {
|
||||
font-family: 'KaiseiOpti-Regular';
|
||||
font-weight: 400;
|
||||
font-size: var(--commodity-price-fontSize, 1.4rem);
|
||||
line-height: var(--commodity-price-lineHeight, 2.3rem);
|
||||
&.is-download {
|
||||
color: #979797;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.btn {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -30,7 +30,9 @@
|
||||
<span class="icon">
|
||||
<svg-icon name="order-shop" size="24" />
|
||||
</span>
|
||||
<span class="text">{{ order.shopName }}</span>
|
||||
<span class="text" @click="handleRouteBrand(order)">
|
||||
{{ order.shopName }}
|
||||
</span>
|
||||
</div>
|
||||
<p class="order-card__date">{{ order.formatUpdatetime }}</p>
|
||||
</div>
|
||||
@@ -93,6 +95,7 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, ref, shallowRef } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { fetchMyOrders } from '@/api/user'
|
||||
import ScItem from '@/views/shoppingCart/sc-item.vue'
|
||||
import Empty from './Empty.vue'
|
||||
@@ -131,6 +134,7 @@
|
||||
formatUpdatetime: string
|
||||
}
|
||||
|
||||
const ROUTER = useRouter()
|
||||
const { t, locale } = useI18n({ useScope: 'global' })
|
||||
|
||||
const statusOptions = computed<StatusOption[]>(() => [
|
||||
@@ -292,6 +296,10 @@
|
||||
}
|
||||
}
|
||||
|
||||
const handleRouteBrand = (order: OrderRecord) => {
|
||||
ROUTER.push(`/brand/${order.sellerId}`)
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
fetchAllOrders()
|
||||
})
|
||||
@@ -397,6 +405,10 @@
|
||||
}
|
||||
.brand {
|
||||
column-gap: 1rem;
|
||||
.text {
|
||||
text-decoration: underline;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user