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