This commit is contained in:
李志鹏
2026-05-27 13:06:28 +08:00
7 changed files with 149 additions and 108 deletions

View File

@@ -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, Number], 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>

View File

@@ -345,4 +345,9 @@ export default {
Offices: "Offices", Offices: "Offices",
JoinWithUs: "Join with Us", JoinWithUs: "Join with Us",
}, },
addShoppingCart:{
title: 'Added to your Shopping Cart',
statement: 'Digital Assets Only. No physical product included.',
button: 'Set Shopping Cart',
}
} }

View File

@@ -345,4 +345,9 @@ export default {
Offices: "办公室", Offices: "办公室",
JoinWithUs: "加入我们", JoinWithUs: "加入我们",
}, },
addShoppingCart:{
title: "已添加到您的购物车",
statement: "仅限数字资产。不包含实体产品。",
button: "去购物车"
}
} }

View File

@@ -195,13 +195,14 @@ defineExpose({})
.digitalItemDetail{ .digitalItemDetail{
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow-y: auto;
position: relative; position: relative;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
.center{ .center{
flex: 1; // flex: 1;
display: flex; display: flex;
overflow: hidden; // overflow: hidden;
.img-list{ .img-list{
flex: 1; flex: 1;
display: grid; display: grid;
@@ -211,6 +212,7 @@ defineExpose({})
// --row-width: 29.3rem; // --row-width: 29.3rem;
overflow-y: auto; overflow-y: auto;
position: relative; position: relative;
border-right: 0.5px solid #585858;
&::-webkit-scrollbar{ &::-webkit-scrollbar{
display: none; display: none;
} }
@@ -268,12 +270,15 @@ defineExpose({})
} }
} }
.img-detail{ .img-detail{
border-left: 0.5px solid #585858;
padding-left: 3.2rem; padding-left: 3.2rem;
width: 57rem; width: 57rem;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow-y: auto; overflow-y: auto;
height: calc(var(--app-view-height) - var(--footer-height));
position: sticky;
top: 0;
// height: 100%;
&::-webkit-scrollbar{ &::-webkit-scrollbar{
display: none; display: none;
} }
@@ -305,7 +310,6 @@ defineExpose({})
font-size: 3rem; font-size: 3rem;
line-height: 120%; line-height: 120%;
margin-bottom: 1rem; margin-bottom: 1rem;
cursor: pointer;
} }
.img-price{ .img-price{
font-family: KaiseiOpti-Bold; font-family: KaiseiOpti-Bold;
@@ -338,6 +342,7 @@ defineExpose({})
font-size: 1.8rem; font-size: 1.8rem;
line-height: 100%; line-height: 100%;
margin-bottom: .8rem; margin-bottom: .8rem;
cursor: pointer;
} }
.release-time{ .release-time{
font-family: KaiseiOpti-Regular; font-family: KaiseiOpti-Regular;

View File

@@ -45,7 +45,7 @@ const {} = toRefs(data);
<el-drawer v-model="isShoppingShow" width="50rem" class="addShoppingDrawer" :close-on-click-modal="false" title="I am the title" :with-header="false"> <el-drawer v-model="isShoppingShow" width="50rem" class="addShoppingDrawer" :close-on-click-modal="false" title="I am the title" :with-header="false">
<div class="addShoppingInfo"> <div class="addShoppingInfo">
<div class="header"> <div class="header">
<div class="title">Added to your Shopping Cart</div> <div class="title">{{ $t('addShoppingCart.title') }}</div>
<span class="close" @click="shoppingClose" <span class="close" @click="shoppingClose"
><svg-icon name="close" size="13" ><svg-icon name="close" size="13"
/></span> /></span>
@@ -76,11 +76,11 @@ const {} = toRefs(data);
<div class="icon"> <div class="icon">
<SvgIcon name="statement" size="16.6" /> <SvgIcon name="statement" size="16.6" />
</div> </div>
Digital Assets Only. No physical product included. {{ $t('addShoppingCart.statement') }}
</div> </div>
</div> </div>
<div class="button" @click="goShopping"> <div class="button" @click="goShopping">
SeE Shopping Cart {{ $t('addShoppingCart.button') }}
</div> </div>
</div> </div>
<!-- <sc-list is-mini style="flex: 0.6;" @close="shoppingClose"/> --> <!-- <sc-list is-mini style="flex: 0.6;" @close="shoppingClose"/> -->

View File

@@ -33,7 +33,7 @@
</div> </div>
<div class="amount" v-show="!disabled">${{ info.amount }}<span> HKD</span></div> <div class="amount" v-show="!disabled">${{ info.amount }}<span> HKD</span></div>
<SvgIcon <SvgIcon
v-if="orderActionsLayout" v-if="showDownload"
class="download" class="download"
name="download" name="download"
size="32" size="32"
@@ -59,6 +59,7 @@
showRemove: { type: Boolean, default: true }, showRemove: { type: Boolean, default: true },
orderActionsLayout: { type: Boolean, default: false }, orderActionsLayout: { type: Boolean, default: false },
showBrand: { type: Boolean, default: true }, showBrand: { type: Boolean, default: true },
isOrder: { type: Boolean, default: false },
info: { info: {
type: Object as () => { type: Object as () => {
status: number status: number
@@ -77,6 +78,10 @@
const onRemove = () => { const onRemove = () => {
emit('remove', props.info) emit('remove', props.info)
} }
const showDownload = computed(() => {
return props.isOrder ? props.info.status === 1 : props.orderActionsLayout
})
const handleBrandClick = () => { const handleBrandClick = () => {
router.push({ router.push({
name: 'brandDetail', name: 'brandDetail',

View File

@@ -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>
@@ -80,6 +82,7 @@
:show-date="false" :show-date="false"
:show-remove="false" :show-remove="false"
:show-brand="false" :show-brand="false"
is-order
order-actions-layout order-actions-layout
/> />
</div> </div>
@@ -92,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'
@@ -130,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[]>(() => [
@@ -183,7 +188,7 @@
} }
const getOrderStatus = (order: OrderRecord) => { const getOrderStatus = (order: OrderRecord) => {
return getOrderStatusValue(order.items[0]?.status) return getOrderStatusValue(order.status)
} }
const formatOrderUpdateTime = (dateStr: string) => { const formatOrderUpdateTime = (dateStr: string) => {
@@ -291,6 +296,10 @@
} }
} }
const handleRouteBrand = (order: OrderRecord) => {
ROUTER.push(`/brand/${order.sellerId}`)
}
onMounted(() => { onMounted(() => {
fetchAllOrders() fetchAllOrders()
}) })
@@ -396,6 +405,10 @@
} }
.brand { .brand {
column-gap: 1rem; column-gap: 1rem;
.text {
text-decoration: underline;
cursor: pointer;
}
} }
} }