|
|
<script setup>
|
|
|
import { ref} from "vue"
|
|
|
// type：category-分类 ； list：内容列表
|
|
|
const props = defineProps(['type','info',"noPrice"]);
|
|
|
</script>
|
|
|
<template>
|
|
|
<view class="goodsInfoBox">
|
|
|
<!-- 展示方式1 上下结构-->
|
|
|
<view class="showtype1 " v-if="type==1">
|
|
|
<!-- <img style="width:100%;border-radius: 5px;" :src="info.cover" alt=""> -->
|
|
|
<image style="width: 100%;border-radius: 5px;" :style="{ height: info && info.goods_image?'340rpx':'340rpx'}" :src="info?.goods_image" mode="aspectFill"></image>
|
|
|
<view class="g-show-name text-ellipsis-1">{{info?.goods_name}}</view>
|
|
|
<view class="g-desc">
|
|
|
{{info?.desc}}
|
|
|
</view>
|
|
|
<view class="g-buy-box">
|
|
|
<view class="g-price-box">
|
|
|
<view class="g-price">￥{{info?.sell_price}}</view>
|
|
|
<view class="g-price-o" v-if="info?.market_price">
|
|
|
￥{{info?.market_price}}
|
|
|
</view>
|
|
|
</view>
|
|
|
<slot name="btn"></slot>
|
|
|
</view>
|
|
|
</view>
|
|
|
<!-- 展示方式2 左右结构-->
|
|
|
<view class="showtype2 " v-else>
|
|
|
<view class="gcb-list-card-img-box">
|
|
|
<!-- <img style="width:100%;border-radius: 5px;" :src="info.cover" alt=""> -->
|
|
|
<!-- <image :src="info?.goods_image" style="width: 100%;" :style="{ height: info && info.goods_image?'':'100rpx'}" mode="widthFix"></image> -->
|
|
|
<image :src="info?.goods_image" style="width: 100%;" mode="widthFix"></image>
|
|
|
</view>
|
|
|
<view class="gcb-list-card-info-box">
|
|
|
<view class="g-show-name text-ellipsis-1">{{info?.goods_name}}</view>
|
|
|
<view class="g-desc">
|
|
|
{{info?.desc}}
|
|
|
</view>
|
|
|
<view class="g-buy-box">
|
|
|
<view class="g-price-box" v-if="!noPrice">
|
|
|
<view class="g-price">￥{{info?.sell_price}}</view>
|
|
|
<view class="g-price-o" v-if="info?.market_price">
|
|
|
￥{{info?.market_price}}
|
|
|
</view>
|
|
|
</view>
|
|
|
<slot name="btn"></slot>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</template>
|
|
|
<style lang="scss">
|
|
|
.gcb-list-card-info-box{
|
|
|
width: 70%;
|
|
|
}
|
|
|
.showtype2{
|
|
|
display: flex;
|
|
|
.gcb-list-card-img-box{
|
|
|
// width: 30%;
|
|
|
// padding: 20rpx;
|
|
|
max-height: 200rpx;
|
|
|
max-width: 200rpx;
|
|
|
width: 30%;
|
|
|
border: 1px solid #ececec;
|
|
|
overflow: hidden;
|
|
|
margin-right: 20rpx;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
image{
|
|
|
max-height: 200rpx;
|
|
|
width: 150rpx;
|
|
|
height: 150rpx;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.g-buy-box{
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
.g-cart{
|
|
|
image{
|
|
|
width: 40rpx;
|
|
|
height: 40rpx;
|
|
|
}
|
|
|
}
|
|
|
.g-price-box{
|
|
|
color: #FD5B4E;
|
|
|
display: flex;
|
|
|
align-items: flex-end;
|
|
|
.g-price{
|
|
|
font-size: 36rpx;
|
|
|
margin-right: 10rpx;
|
|
|
font-weight: 600;
|
|
|
}
|
|
|
.g-price-o{
|
|
|
color: gray;
|
|
|
font-size: 28rpx;
|
|
|
text-decoration: line-through;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.g-desc{
|
|
|
color: gray;
|
|
|
font-size: 28rpx;
|
|
|
margin: 20rpx 0;
|
|
|
}
|
|
|
.g-show-name{
|
|
|
margin-top: 20rpx;
|
|
|
font-weight: bolder;
|
|
|
}
|
|
|
.gcb-title{
|
|
|
background: linear-gradient(0deg, #82c8ea, #abdef4);
|
|
|
color: white;
|
|
|
padding: 16rpx 0;
|
|
|
font-size: 36rpx;
|
|
|
font-weight: 600;
|
|
|
text-align: center;
|
|
|
}
|
|
|
.gcb-list{
|
|
|
display: flex;
|
|
|
flex-wrap: wrap;
|
|
|
justify-content: space-between;
|
|
|
padding: 0 20rpx;
|
|
|
.gcb-list-card{
|
|
|
// padding: 20rpx;
|
|
|
width: 48%;
|
|
|
margin: 20rpx 0;
|
|
|
}
|
|
|
}
|
|
|
.goods-card-box{
|
|
|
background: white;
|
|
|
border: 2rpx solid #82c8ea;
|
|
|
border-radius: 20rpx;
|
|
|
overflow: hidden;
|
|
|
.category-box{
|
|
|
text-align: center;
|
|
|
}
|
|
|
}
|
|
|
</style> |