代码提交
This commit is contained in:
黄少君
169
components/goodsComponents/Goods.vue
Normal file
169
components/goodsComponents/Goods.vue
Normal file
@ -0,0 +1,169 @@
|
||||
<!--
|
||||
@name: 上哦
|
||||
@author: kahu4
|
||||
@date: 2023-11-02 18:30
|
||||
@description：Goods
|
||||
@update: 2023-11-02 18:30
|
||||
-->
|
||||
<script setup>
|
||||
import { toRefs } from "vue";
|
||||
import { GOODS_ITEM_TYPE } from "@/components/goodsComponents/utils/index.type";
|
||||
import { useRouter } from "@/hooks/useRouter";
|
||||
|
||||
const props = defineProps({
|
||||
goods: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
},
|
||||
imgWidth: {
|
||||
type: String,
|
||||
default: '100%'
|
||||
},
|
||||
/** 图片比例 */
|
||||
ratio: {
|
||||
type: String,
|
||||
default: () => "1/1"
|
||||
},
|
||||
infoPadding: {
|
||||
type: String,
|
||||
default: () => "0 0"
|
||||
},
|
||||
/** title是否换行 */
|
||||
titleNowrap: {
|
||||
type: Boolean,
|
||||
default: () => true
|
||||
},
|
||||
/** title 文字大小 rpx */
|
||||
titleSize: {
|
||||
type: Number,
|
||||
default: () => 28
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
default: () => GOODS_ITEM_TYPE.NEW
|
||||
},
|
||||
row: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
})
|
||||
|
||||
const {
|
||||
goods,
|
||||
imgWidth,
|
||||
ratio,
|
||||
infoPadding,
|
||||
titleNowrap,
|
||||
titleSize,
|
||||
row,
|
||||
} = toRefs(props)
|
||||
|
||||
const {push} = useRouter()
|
||||
|
||||
function toDetail() {
|
||||
push({url: '/pages/goodsDetail/goodsDetail'}, {data: {id: goods.value.id}})
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view
|
||||
:class="{'goods':true,'row':row}"
|
||||
@click="toDetail"
|
||||
>
|
||||
<!-- goods image -->
|
||||
<view
|
||||
class="goods-image"
|
||||
:style="{
|
||||
'width':imgWidth,
|
||||
'aspect-ratio':ratio
|
||||
}"
|
||||
>
|
||||
<image
|
||||
:src="goods.image"
|
||||
class="image"
|
||||
mode="aspectFill"
|
||||
/>
|
||||
</view>
|
||||
<!-- good info -->
|
||||
<view
|
||||
class="goods-info"
|
||||
:style="{
|
||||
'padding':infoPadding,
|
||||
'width':row?`calc( 100% - ${imgWidth} )`:'100%',
|
||||
'height':row?`${imgWidth}`:'auto'
|
||||
}"
|
||||
>
|
||||
<view
|
||||
:class="{
|
||||
'title-row':true,
|
||||
'nowrap': titleNowrap
|
||||
}"
|
||||
:style="{
|
||||
'font-size':`${titleSize}rpx`
|
||||
}"
|
||||
>
|
||||
{{ goods.storeName }}
|
||||
</view>
|
||||
<slot
|
||||
name="options"
|
||||
:goods="goods"
|
||||
></slot>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style
|
||||
scoped
|
||||
lang="scss"
|
||||
>
|
||||
.goods {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
||||
&-image {
|
||||
flex-shrink: 0;
|
||||
|
||||
.image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&-info {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
|
||||
.title-row {
|
||||
user-select: none;
|
||||
width: 100%;
|
||||
//padding: 14rpx 0;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.nowrap {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.goods-image {
|
||||
|
||||
}
|
||||
|
||||
.goods-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
</style>
|
||||
143
components/goodsComponents/components/Options.vue
Normal file
143
components/goodsComponents/components/Options.vue
Normal file
@ -0,0 +1,143 @@
|
||||
<!--
|
||||
@name: Options
|
||||
@author: kahu4
|
||||
@date: 2023-11-03 15:30
|
||||
@description：Options
|
||||
@update: 2023-11-03 15:30
|
||||
-->
|
||||
<script setup>
|
||||
import { toRefs } from "vue";
|
||||
|
||||
const props = defineProps({
|
||||
row: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
showBtn: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
btnText: {
|
||||
type: String,
|
||||
default: '立即抢购'
|
||||
},
|
||||
oldPrice: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
tips: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
schedule: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
goods: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
})
|
||||
const {row, showBtn, oldPrice, btnText} = toRefs(props)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view
|
||||
class="options flex flex-jc__sb flex-ai__center"
|
||||
:class="{row,'flex-ai__center':row,'flex-ai__end':!row}"
|
||||
>
|
||||
<view class="price-box ">
|
||||
<view class="price-row flex flex-jc__sb flex-ai__end">
|
||||
<view class="price">
|
||||
￥{{ goods.price }}
|
||||
</view>
|
||||
<view
|
||||
class="old-price"
|
||||
v-if="oldPrice"
|
||||
>
|
||||
￥{{ goods.otPrice }}
|
||||
</view>
|
||||
</view>
|
||||
<view
|
||||
class="tips-row"
|
||||
v-if="tips"
|
||||
>
|
||||
限量100件
|
||||
</view>
|
||||
<view
|
||||
class="process-row"
|
||||
v-if="schedule"
|
||||
>
|
||||
<view class="schedule"></view>
|
||||
</view>
|
||||
</view>
|
||||
<view
|
||||
class="btn-box"
|
||||
:class="{'no-btn':!showBtn}"
|
||||
>
|
||||
<slot
|
||||
:goods="goods"
|
||||
name="right-tip"
|
||||
>
|
||||
{{ showBtn ? btnText : `仅剩${ goods.stock }${ goods.unit || '' }` }}
|
||||
</slot>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style
|
||||
scoped
|
||||
lang="scss"
|
||||
>
|
||||
.options {
|
||||
width: 100%;
|
||||
|
||||
.price-box {
|
||||
|
||||
.price-row {
|
||||
font-size: 28rpx;
|
||||
color: $primary-color;
|
||||
|
||||
.old-price {
|
||||
color: $tips-color;
|
||||
font-size: 20rpx;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
}
|
||||
|
||||
.tips-row {
|
||||
color: $tips-color;
|
||||
font-size: 24rpx;
|
||||
margin: 6rpx 0;
|
||||
}
|
||||
|
||||
.process-row {
|
||||
width: 100%;
|
||||
height: 15rpx;
|
||||
background: #f5f5f5;
|
||||
position: relative;
|
||||
|
||||
.schedule {
|
||||
background: $primary-color;
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-box {
|
||||
@include usePadding(15, 10);
|
||||
flex-shrink: 0;
|
||||
background: $primary-color;
|
||||
color: $white-color;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.no-btn {
|
||||
padding: 0 0;
|
||||
background: none;
|
||||
color: $tips-color;
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
15
components/goodsComponents/utils/index.type.js
Normal file
15
components/goodsComponents/utils/index.type.js
Normal file
@ -0,0 +1,15 @@
|
||||
/**
|
||||
* @name: index.type
|
||||
* @author: kahu4
|
||||
* @date: 2023-11-02 18:51
|
||||
* @description：index.type
|
||||
* @update: 2023-11-02 18:51
|
||||
* */
|
||||
export const GOODS_ITEM_TYPE = {
|
||||
NEW: 'NEW', // 新品首发
|
||||
GROUP: 'GROUP', // 拼团
|
||||
SECKILL: 'SECKILL', // 秒杀
|
||||
BARGAIN: 'BARGAIN', // 砍价
|
||||
SHOPPING_CART: 'CART', // 购物车数据
|
||||
CONFIRM_ORDER: 'ORDER', // 确认订单数据
|
||||
}
|
||||
Reference in New Issue
Block a user