aidlab/Aida_Purchaser_Front
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: wardrobe assets页面

Browse Source
This commit is contained in:
zhangyahui
2026-04-23 17:29:15 +08:00
parent 254f61e524
commit 281272c9f9
6 changed files with 243 additions and 125 deletions
Download Patch File Download Diff File Expand all files Collapse all files

166
src/components/CommodityItem.vue
View File

@@ -1,90 +1,100 @@
<script setup lang="ts">
import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
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'
}
})
const emit = defineEmits([
'addShopping',
'openDetail'
])
let data = reactive({
url: {
type: String,
default: ''
},
name: {
type: String,
default: 'aaa'
},
price: {
type: String,
default: '111'
},
download: {
type: Boolean,
default: false
}
})
const emit = defineEmits(['addShopping', 'openDetail', 'download'])
let data = reactive({})
const addShopping = () => {
emit('addShopping')
if (props.download) {
emit('download')
} else {
emit('addShopping')
}
}
const openDetail = () => {
emit('openDetail')
emit('openDetail')
}
onMounted(()=>{
})
onUnmounted(()=>{
})
onMounted(() => {})
onUnmounted(() => {})
defineExpose({})
const {} = toRefs(data);
const {} = toRefs(data)
</script>
<template>
<div class="commodity-item">
<img :src="props.url" alt="" @click="openDetail">
<div class="detail">
<div class="text">
<div class="name">
{{ props.name }}
</div>
<div class="price">
{{ props.price }}
</div>
</div>
<div class="btn" @click="addShopping">
<div class="text">
<SvgIcon name="add" size="26"></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 }">
{{ 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%);
> 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);
}
}
}
.btn{
cursor: pointer;
}
}
</style>
.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>