loser/JM-MiniApp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

init

Browse Source
This commit is contained in:
阿怪
2023-10-08 21:21:21 +08:00
commit 60bf302119
377 changed files with 111630 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

139
components/goodsInfo.vue Normal file
View File

@@ -0,0 +1,139 @@
<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>