567 lines
10 KiB
Vue
567 lines
10 KiB
Vue
|
<template>
|
|||
|
|
<view
|
|||
|
|
:class="{ goods: true, 'goods-card': card, 'goods-list': list, 'goods-min': min, 'goods-fill': fill, 'goods-round': round }"
|
|||
|
|
>
|
|||
|
|
<view
|
|||
|
|
class="goods-header"
|
|||
|
|
@tap="toDetail"
|
|||
|
|
>
|
|||
|
|
<view class="goods-thumb">
|
|||
|
|
<image
|
|||
|
|
:src="data.image"
|
|||
|
|
class="goods-thumb-img"
|
|||
|
|
style="object-fit: cover"
|
|||
|
|
/>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view :class="['goods-content']">
|
|||
|
|
<view
|
|||
|
|
class="goods-storeName"
|
|||
|
|
@tap="toDetail"
|
|||
|
|
>{{ data.storeName }}</view>
|
|||
|
|
<view
|
|||
|
|
class="goods-list-model"
|
|||
|
|
v-if="selectModel"
|
|||
|
|
>
|
|||
|
|
<div
|
|||
|
|
class="goods-list-model-border"
|
|||
|
|
@tap.stop="handleOpenSelect"
|
|||
|
|
>
|
|||
|
|
<view class="goods-list-model-label">{{ data.attrInfo.sku }}</view>
|
|||
|
|
<view class="goods-list-model-action icon">
|
|||
|
|
<image src="@/static/images/down.png" />
|
|||
|
|
</view>
|
|||
|
|
</div>
|
|||
|
|
</view>
|
|||
|
|
<view
|
|||
|
|
class="goods-list-model-info"
|
|||
|
|
v-if="model"
|
|||
|
|
>
|
|||
|
|
<view class="goods-list-model-label">{{ data.attrInfo.sku }}</view>
|
|||
|
|
|
|||
|
|
<!-- <view class="goods-list-model-info-label">颜色：</view>
|
|||
|
|
<view class="goods-list-model-info-value">黑色</view>
|
|||
|
|
<view class="goods-list-model-info-label">尺码：</view>
|
|||
|
|
<view class="goods-list-model-info-value">M</view> -->
|
|||
|
|
</view>
|
|||
|
|
<view class="goods-info">
|
|||
|
|
<view class="goods-info-left">
|
|||
|
|
<view
|
|||
|
|
class="goods-desc"
|
|||
|
|
v-if="groupNum"
|
|||
|
|
>{{ data.groupNum }}人团</view>
|
|||
|
|
<view
|
|||
|
|
class="goods-price-row"
|
|||
|
|
v-if="primary"
|
|||
|
|
>
|
|||
|
|
<view class="goods-price goods-price-primary">
|
|||
|
|
¥{{ data.price }}
|
|||
|
|
</view>
|
|||
|
|
<view
|
|||
|
|
class="goods-price goods-price-original"
|
|||
|
|
v-if="original"
|
|||
|
|
>
|
|||
|
|
¥{{ data.original }}
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view
|
|||
|
|
class="goods-price goods-price-default"
|
|||
|
|
v-if="!primary"
|
|||
|
|
>¥{{ data.price }}</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="goods-info-action">
|
|||
|
|
<view class="goods-info-action-btn">
|
|||
|
|
<slot name="action"></slot>
|
|||
|
|
</view>
|
|||
|
|
<view
|
|||
|
|
class="goods-info-action-desc"
|
|||
|
|
v-if="stock"
|
|||
|
|
>
|
|||
|
|
仅剩{{ data.stock }}件
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view
|
|||
|
|
class="buy-num"
|
|||
|
|
v-if="purchase"
|
|||
|
|
>
|
|||
|
|
<view class="buy-num-info-desc">
|
|||
|
|
{{ data.purchase }}
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view v-if="buyProgress">
|
|||
|
|
<view class="buy-progress">
|
|||
|
|
<view class="buy-progress-info">
|
|||
|
|
<view
|
|||
|
|
class="buy-progress-info-desc"
|
|||
|
|
v-if="quantity"
|
|||
|
|
>
|
|||
|
|
限量{{ data.quantity }}件
|
|||
|
|
</view>
|
|||
|
|
<uv-line-progress
|
|||
|
|
:percentage="50"
|
|||
|
|
:showText="false"
|
|||
|
|
/>
|
|||
|
|
</view>
|
|||
|
|
<view class="buy-progress-action">
|
|||
|
|
<uv-button
|
|||
|
|
round
|
|||
|
|
block
|
|||
|
|
type="primary"
|
|||
|
|
>
|
|||
|
|
立即抢购
|
|||
|
|
</uv-button>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<good-attr-select
|
|||
|
|
ref="selectAttrPanel"
|
|||
|
|
:id="data.id"
|
|||
|
|
@select="handleSelectAttr"
|
|||
|
|
/>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup>
|
|||
|
|
import { navigateTo } from '@/utils/router';
|
|||
|
|
import { ref } from 'vue'
|
|||
|
|
const props = defineProps(['data', 'min', 'groupNum', 'original', 'stock', 'primary', 'card', 'list', 'buyProgress', 'quantity', 'selectModel', 'model', 'purchase', 'link', 'fill', 'round'])
|
|||
|
|
|
|||
|
|
// 团购人数
|
|||
|
|
const groupNum = ref(props.groupNum)
|
|||
|
|
// 剩余数量
|
|||
|
|
const stock = ref(props.stock)
|
|||
|
|
// 使用主题颜色的价格
|
|||
|
|
const primary = ref(props.primary !== undefined)
|
|||
|
|
// 卡片模式
|
|||
|
|
const card = ref(props.card !== undefined)
|
|||
|
|
// 列表模式
|
|||
|
|
const list = ref(props.list !== undefined)
|
|||
|
|
// 限量多少件
|
|||
|
|
const quantity = ref(props.quantity)
|
|||
|
|
// 显示购买进度
|
|||
|
|
const buyProgress = ref(props.buyProgress)
|
|||
|
|
// 选择规格
|
|||
|
|
const selectModel = ref(props.selectModel !== undefined)
|
|||
|
|
// 显示规格
|
|||
|
|
const model = ref(props.model !== undefined)
|
|||
|
|
// 购买数量
|
|||
|
|
const purchase = ref(props.purchase)
|
|||
|
|
// 原价
|
|||
|
|
const original = ref(props.original)
|
|||
|
|
// 小尺寸
|
|||
|
|
const min = ref(props.min)
|
|||
|
|
const selectAttrPanel = ref(null)
|
|||
|
|
const link = ref(props.link !== undefined)
|
|||
|
|
const fill = ref(props.fill !== undefined)
|
|||
|
|
const round = ref(props.round !== undefined)
|
|||
|
|
|
|||
|
|
const toDetail = () => {
|
|||
|
|
if (!link.value) { return }
|
|||
|
|
navigateTo({
|
|||
|
|
url: '/pages/goodsDetail/goodsDetail',
|
|||
|
|
query: {
|
|||
|
|
id: props.data.id
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const handleOpenSelect = () => {
|
|||
|
|
selectAttrPanel.value.open()
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const handleSelectAttr = () => {
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="less">
|
|||
|
|
.goods {
|
|||
|
|
position: relative;
|
|||
|
|
padding: 30rpx 0;
|
|||
|
|
|
|||
|
|
|
|||
|
|
&-card {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
|
|||
|
|
.goods {
|
|||
|
|
&-content {
|
|||
|
|
padding: 0 20rpx;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&-info {
|
|||
|
|
margin-top: 15rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&-thumb {
|
|||
|
|
margin-bottom: 15rpx;
|
|||
|
|
width: 100%;
|
|||
|
|
|
|||
|
|
&-img {
|
|||
|
|
width: 100%;
|
|||
|
|
display: block;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&-header {}
|
|||
|
|
|
|||
|
|
&-thumb {
|
|||
|
|
background: #FAFAFA;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&-content {}
|
|||
|
|
|
|||
|
|
&-storeName {
|
|||
|
|
line-height: 40rpx;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
font-weight: 500;
|
|||
|
|
color: #333333;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
&-price {
|
|||
|
|
&-row {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
|
|||
|
|
.goods-price {}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&-primary {
|
|||
|
|
line-height: 42rpx;
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
font-weight: 500;
|
|||
|
|
color: #EE6D46;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&-default {
|
|||
|
|
line-height: 40rpx;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
font-weight: 500;
|
|||
|
|
color: #333333;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&-original {
|
|||
|
|
margin-left: 9rpx;
|
|||
|
|
line-height: 28rpx;
|
|||
|
|
font-size: 20rpx;
|
|||
|
|
color: #999999;
|
|||
|
|
text-decoration: line-through;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
&-desc {
|
|||
|
|
line-height: 33rpx;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
color: #999999;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&-info {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: flex-end;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
|
|||
|
|
&-left {}
|
|||
|
|
|
|||
|
|
&-action {
|
|||
|
|
&-btn {}
|
|||
|
|
|
|||
|
|
&-desc {
|
|||
|
|
line-height: 28rpx;
|
|||
|
|
font-size: 20rpx;
|
|||
|
|
color: #999999;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&-image {
|
|||
|
|
&-img {}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&-list {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: row;
|
|||
|
|
padding: 14rpx;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
width: 100%;
|
|||
|
|
|
|||
|
|
.goods {
|
|||
|
|
&-thumb {
|
|||
|
|
margin-bottom: 0;
|
|||
|
|
width: 220rpx;
|
|||
|
|
height: 220rpx;
|
|||
|
|
|
|||
|
|
&-img {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
display: block;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&-content {
|
|||
|
|
padding-right: 40rpx;
|
|||
|
|
margin-left: 30rpx;
|
|||
|
|
flex: 1;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
&-model {
|
|||
|
|
display: flex;
|
|||
|
|
|
|||
|
|
|
|||
|
|
margin-bottom: 28rpx;
|
|||
|
|
|
|||
|
|
&-border {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
height: 40rpx;
|
|||
|
|
border: 1px solid #CCCCCC;
|
|||
|
|
opacity: 1;
|
|||
|
|
border-radius: 0rpx;
|
|||
|
|
padding: 0 10rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&-info {}
|
|||
|
|
|
|||
|
|
&-label {
|
|||
|
|
line-height: 38rpx;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
color: #999999;
|
|||
|
|
margin-right: 10rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&-value {
|
|||
|
|
line-height: 38rpx;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
color: #333333;
|
|||
|
|
margin-right: 10rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&-action {
|
|||
|
|
width: 11rpx;
|
|||
|
|
height: 7rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&-min {
|
|||
|
|
.goods {
|
|||
|
|
&-thumb {
|
|||
|
|
margin-bottom: 0;
|
|||
|
|
width: 150rpx;
|
|||
|
|
height: 150rpx;
|
|||
|
|
|
|||
|
|
&-img {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
display: block;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&-fill {
|
|||
|
|
padding-top: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&-round {
|
|||
|
|
border-radius: 20rpx;
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// .goods {
|
|||
|
|
// padding: 16rpx 14rpx;
|
|||
|
|
|
|||
|
|
// &-header {
|
|||
|
|
// display: flex;
|
|||
|
|
// align-items: flex-start;
|
|||
|
|
// }
|
|||
|
|
|
|||
|
|
// &-thumb {
|
|||
|
|
|
|||
|
|
// width: 220rpx;
|
|||
|
|
// height: 220rpx;
|
|||
|
|
|
|||
|
|
// &-img {
|
|||
|
|
// width: 100%;
|
|||
|
|
// height: 100%;
|
|||
|
|
// display: block;
|
|||
|
|
// }
|
|||
|
|
// }
|
|||
|
|
|
|||
|
|
// &-content {
|
|||
|
|
// margin-top: 24rpx;
|
|||
|
|
// margin-left: 40rpx;
|
|||
|
|
// flex: 1
|
|||
|
|
// }
|
|||
|
|
|
|||
|
|
// &-storeName {
|
|||
|
|
// line-height: 40rpx;
|
|||
|
|
// font-size: 28rpx;
|
|||
|
|
// font-weight: 500;
|
|||
|
|
// color: #333333;
|
|||
|
|
// margin-bottom: 35rpx;
|
|||
|
|
// }
|
|||
|
|
|
|||
|
|
// &-info {
|
|||
|
|
// display: flex;
|
|||
|
|
// align-items: center;
|
|||
|
|
// justify-content: space-between;
|
|||
|
|
|
|||
|
|
// &-left {
|
|||
|
|
// display: flex;
|
|||
|
|
// align-items: flex-end;
|
|||
|
|
|
|||
|
|
// }
|
|||
|
|
|
|||
|
|
// &-action {
|
|||
|
|
// &-btn {}
|
|||
|
|
|
|||
|
|
// &-desc {
|
|||
|
|
// color: #999999;
|
|||
|
|
// font-size: 24rpx;
|
|||
|
|
// line-height: 40rpx;
|
|||
|
|
// }
|
|||
|
|
// }
|
|||
|
|
|
|||
|
|
// }
|
|||
|
|
|
|||
|
|
|
|||
|
|
// &-price {
|
|||
|
|
// &-default {
|
|||
|
|
// line-height: 28rpx;
|
|||
|
|
// font-size: 20rpx;
|
|||
|
|
// color: #999999;
|
|||
|
|
|
|||
|
|
// }
|
|||
|
|
|
|||
|
|
// &-primary {
|
|||
|
|
// line-height: 42rpx;
|
|||
|
|
// font-size: 30rpx;
|
|||
|
|
// font-weight: 500;
|
|||
|
|
// color: #EE6D46;
|
|||
|
|
// margin-left: 5rpx;
|
|||
|
|
// }
|
|||
|
|
// }
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
// &-desc {
|
|||
|
|
// color: #999999;
|
|||
|
|
// font-size: 24rpx;
|
|||
|
|
// line-height: 40rpx;
|
|||
|
|
// }
|
|||
|
|
|
|||
|
|
|
|||
|
|
&-model {
|
|||
|
|
display: inline-flex;
|
|||
|
|
align-items: center;
|
|||
|
|
width: auto;
|
|||
|
|
height: 40rpx;
|
|||
|
|
border: 1px solid #CCCCCC;
|
|||
|
|
opacity: 1;
|
|||
|
|
border-radius: 0rpx;
|
|||
|
|
padding: 0 10rpx;
|
|||
|
|
|
|||
|
|
margin-bottom: 28rpx;
|
|||
|
|
|
|||
|
|
&-label {
|
|||
|
|
line-height: 38rpx;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
color: #999999;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&-value {
|
|||
|
|
line-height: 38rpx;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
color: #333333;
|
|||
|
|
margin-right: 10rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&-action {
|
|||
|
|
width: 11rpx;
|
|||
|
|
height: 7rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// &-model-info {
|
|||
|
|
// display: inline-flex;
|
|||
|
|
// align-items: center;
|
|||
|
|
// width: auto;
|
|||
|
|
// height: 40rpx;
|
|||
|
|
// opacity: 1;
|
|||
|
|
// border-radius: 0rpx;
|
|||
|
|
// margin-bottom: 28rpx;
|
|||
|
|
|
|||
|
|
// &-label {
|
|||
|
|
// line-height: 38rpx;
|
|||
|
|
// font-size: 24rpx;
|
|||
|
|
// color: #999999;
|
|||
|
|
// }
|
|||
|
|
|
|||
|
|
// &-value {
|
|||
|
|
// line-height: 38rpx;
|
|||
|
|
// font-size: 24rpx;
|
|||
|
|
// color: #333333;
|
|||
|
|
// margin-right: 10rpx;
|
|||
|
|
// }
|
|||
|
|
|
|||
|
|
// &-action {
|
|||
|
|
// width: 11rpx;
|
|||
|
|
// height: 7rpx;
|
|||
|
|
// }
|
|||
|
|
// }
|
|||
|
|
// }
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.buy-progress {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
|
|||
|
|
&-info {
|
|||
|
|
flex: 1;
|
|||
|
|
|
|||
|
|
&-desc {
|
|||
|
|
color: #999999;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
line-height: 32rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&-action {
|
|||
|
|
margin-left: 17rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.buy-num {
|
|||
|
|
|
|||
|
|
&-info-desc {
|
|||
|
|
color: #999999;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
line-height: 32rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|