新增营销系统、分销系统、会员功能、门店、提现功能
This commit is contained in:
Shaw
@ -1,23 +1,39 @@
|
||||
<template>
|
||||
<view
|
||||
:class="{ goods: true, 'goods-card': card, 'goods-list': list, 'goods-min': min, 'goods-fill': fill, 'goods-round': round }"
|
||||
class="goods"
|
||||
:class="[list && 'goods-list',hasFirst && 'goods-first']"
|
||||
@tap="toDetail"
|
||||
>
|
||||
<view
|
||||
class="goods-header"
|
||||
>
|
||||
<view class="goods-thumb">
|
||||
<image
|
||||
<LazyImage
|
||||
:unique="data.id"
|
||||
:src="data.image"
|
||||
class="goods-thumb-img"
|
||||
style="object-fit: cover"
|
||||
mode="aspectFit"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
<view :class="['goods-content']">
|
||||
<view
|
||||
class="goods-storeName"
|
||||
>{{ data.storeName }}
|
||||
<view class="goods-content">
|
||||
<view>
|
||||
<view
|
||||
class="goods-storeName"
|
||||
>{{ data.storeName }}
|
||||
</view>
|
||||
<view
|
||||
class="buy-progress-first"
|
||||
v-if="hasFirst && buyProgress">
|
||||
<uv-line-progress
|
||||
activeColor="#EE6D46"
|
||||
inactiveColor="#E6E6E6"
|
||||
height="14rpx"
|
||||
:percentage="percentageNum"
|
||||
:showText="false"
|
||||
/>
|
||||
<text class="text">已售{{ percentage }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view
|
||||
class="goods-list-model"
|
||||
@ -38,79 +54,74 @@
|
||||
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">
|
||||
¥{{price || data.price }}
|
||||
<view>
|
||||
<view class="goods-info">
|
||||
<view class="goods-info-left">
|
||||
<view
|
||||
class="goods-desc"
|
||||
v-if="groupBuy"
|
||||
>{{ data.person }}人团
|
||||
</view>
|
||||
<view
|
||||
class="goods-price goods-price-original"
|
||||
v-if="original"
|
||||
class="goods-price-row"
|
||||
>
|
||||
¥{{ data.original }}
|
||||
<view class="goods-price">
|
||||
¥{{ data.campaignPrice || data.price }}
|
||||
</view>
|
||||
<view
|
||||
class="goods-price goods-price-original"
|
||||
v-if="original"
|
||||
>
|
||||
¥{{ data.otPrice || data.originalPrice }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view
|
||||
class="goods-price goods-price-default"
|
||||
v-if="!primary"
|
||||
>
|
||||
<slot
|
||||
name="price"
|
||||
:row="data"
|
||||
<view class="goods-info-action">
|
||||
<view class="goods-info-action-btn">
|
||||
<slot name="action"></slot>
|
||||
</view>
|
||||
<view
|
||||
v-if="stock"
|
||||
class="goods-info-action-desc"
|
||||
>
|
||||
¥{{price || data.price }}
|
||||
</slot>
|
||||
</view>
|
||||
</view>
|
||||
<view class="goods-info-action">
|
||||
<view class="goods-info-action-btn">
|
||||
<slot name="action"></slot>
|
||||
</view>
|
||||
<view
|
||||
v-if="stock"
|
||||
class="goods-info-action-desc"
|
||||
>
|
||||
<text v-if="data.stock">仅剩{{ data.stock }}件</text>
|
||||
<text v-else>库存不足</text>
|
||||
</view>
|
||||
|
||||
<view
|
||||
class="buy-num"
|
||||
v-if="purchase"
|
||||
>
|
||||
<view class="buy-num-info-desc">
|
||||
x{{ purchase }}
|
||||
<text v-if="data.stock">仅剩{{ data.stock }}件</text>
|
||||
<text v-else>库存不足</text>
|
||||
</view>
|
||||
|
||||
<view
|
||||
class="buy-num"
|
||||
v-if="purchase"
|
||||
>
|
||||
<view class="buy-num-info-desc">
|
||||
x{{ purchase }}
|
||||
</view>
|
||||
</view>
|
||||
<uv-button
|
||||
round
|
||||
block
|
||||
type="primary"
|
||||
v-if="groupBuy"
|
||||
>
|
||||
立刻拼团
|
||||
</uv-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="buyProgress">
|
||||
<view class="buy-progress">
|
||||
<view
|
||||
class="buy-progress"
|
||||
v-if="!hasFirst && buyProgress">
|
||||
<view class="buy-progress-info">
|
||||
<view
|
||||
class="buy-progress-info-desc"
|
||||
v-if="quantity"
|
||||
v-if="total"
|
||||
>
|
||||
限量{{ data.quantity }}件
|
||||
限量{{ data.campaignTotal || data.total }}件
|
||||
</view>
|
||||
<uv-line-progress
|
||||
:percentage="50"
|
||||
activeColor="#EE6D46"
|
||||
inactiveColor="#E6E6E6"
|
||||
height="14rpx"
|
||||
:percentage="percentageNum"
|
||||
:showText="false"
|
||||
/>
|
||||
</view>
|
||||
@ -135,24 +146,21 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { computed, ref } from 'vue'
|
||||
import { useRouter } from "@/hooks/useRouter";
|
||||
import { goodsArrowsIcon } from "@/utils/images";
|
||||
import LazyImage from '@/components/LazyImage/index.vue'
|
||||
|
||||
const props = defineProps(['data', 'min', 'groupNum', 'original', 'stock', 'primary', 'card', 'list', 'buyProgress', 'quantity', 'selectModel', 'model', 'purchase', 'link', 'fill', 'round','price'])
|
||||
const props = defineProps(['data', 'groupBuy', 'original', 'stock', 'list', 'buyProgress', 'total', 'selectModel', 'model', 'purchase', 'link', 'price', 'hasFirst'])
|
||||
|
||||
// 团购人数
|
||||
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 groupBuy = ref(props.groupBuy)
|
||||
// 剩余数量
|
||||
const stock = ref(props.stock)
|
||||
// 限量多少件
|
||||
const quantity = ref(props.quantity)
|
||||
const total = ref(props.total)
|
||||
// 显示购买进度
|
||||
const buyProgress = ref(props.buyProgress)
|
||||
// 选择规格
|
||||
@ -163,23 +171,21 @@ const model = ref(props.model !== undefined)
|
||||
const purchase = ref(props.purchase)
|
||||
// 购买价格
|
||||
const price = ref(props.price)
|
||||
|
||||
|
||||
// 原价
|
||||
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 hasFirst = ref(props.hasFirst)
|
||||
|
||||
const {push} = useRouter()
|
||||
const toDetail = () => {
|
||||
if (!link.value) {
|
||||
return
|
||||
}
|
||||
push({url: '/pages/goodsDetail/goodsDetail'}, {data: {id: props.data.id}})
|
||||
push({url: '/pages/goodsDetail/goodsDetail'}, {data: {id: props.data.id, skuId: props.data.skuId}})
|
||||
}
|
||||
|
||||
const handleOpenSelect = () => {
|
||||
@ -190,50 +196,38 @@ const handleSelectAttr = () => {
|
||||
|
||||
}
|
||||
|
||||
const percentageNum = computed(() => {
|
||||
const total = props.data.campaignTotal || props.data.total
|
||||
const stock = props.data.campaignStock || props.data.stock
|
||||
return (total - stock) / total * 100
|
||||
})
|
||||
|
||||
const percentage = computed(() => {
|
||||
const total = props.data.campaignTotal || props.data.total
|
||||
const stock = props.data.campaignStock || props.data.stock
|
||||
return Math.floor((total - stock) / total * 100).toFixed(0) + '%'
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.goods {
|
||||
position: relative;
|
||||
padding: 30rpx 0;
|
||||
|
||||
&-thumb {
|
||||
width: 335rpx;
|
||||
height: 335rpx;
|
||||
|
||||
&-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: 300rpx;
|
||||
height: 300rpx;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
&-img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&-header {
|
||||
}
|
||||
|
||||
&-thumb {
|
||||
background: #FAFAFA;
|
||||
}
|
||||
|
||||
&-content {
|
||||
padding: 20rpx;
|
||||
}
|
||||
|
||||
&-storeName {
|
||||
@ -244,31 +238,57 @@ const handleSelectAttr = () => {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
margin-bottom: 7rpx;
|
||||
}
|
||||
|
||||
.buy-progress-first {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 20rpx;
|
||||
|
||||
.text {
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
// 进度条
|
||||
::v-deep .uv-line-progress {
|
||||
border-radius: 0;
|
||||
|
||||
&__background {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
&__line {
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&-price {
|
||||
line-height: 42rpx;
|
||||
font-size: 30rpx;
|
||||
color: #EE6D46;
|
||||
|
||||
&-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.goods-price {
|
||||
}
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
&-primary {
|
||||
line-height: 42rpx;
|
||||
font-size: 30rpx;
|
||||
color: #EE6D46;
|
||||
}
|
||||
|
||||
&-default {
|
||||
line-height: 42rpx;
|
||||
font-size: 30rpx;
|
||||
color: #EE6D46;
|
||||
}
|
||||
//&-primary {
|
||||
// line-height: 42rpx;
|
||||
// font-size: 30rpx;
|
||||
// color: #EE6D46;
|
||||
//}
|
||||
//
|
||||
//&-default {
|
||||
// line-height: 42rpx;
|
||||
// font-size: 30rpx;
|
||||
// color: #EE6D46;
|
||||
//}
|
||||
|
||||
&-original {
|
||||
margin-left: 9rpx;
|
||||
@ -277,7 +297,6 @@ const handleSelectAttr = () => {
|
||||
color: #999999;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
@ -291,13 +310,12 @@ const handleSelectAttr = () => {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
|
||||
&-left {
|
||||
}
|
||||
margin-bottom: 3rpx;
|
||||
|
||||
&-action {
|
||||
&-btn {
|
||||
}
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
&-desc {
|
||||
line-height: 28rpx;
|
||||
@ -305,27 +323,27 @@ const handleSelectAttr = () => {
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
&-image {
|
||||
&-img {
|
||||
}
|
||||
::v-deep .uv-button {
|
||||
width: 140rpx;
|
||||
height: 60rpx;
|
||||
padding: 0;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
&-list {
|
||||
&-list, &-first {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding: 40rpx 34rpx 30rpx;
|
||||
padding: 20rpx 34rpx 20rpx 20rpx;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
|
||||
.goods {
|
||||
&-thumb {
|
||||
margin-bottom: 0;
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
width: 270rpx;
|
||||
height: 270rpx;
|
||||
|
||||
&-img {
|
||||
width: 100%;
|
||||
@ -335,6 +353,7 @@ const handleSelectAttr = () => {
|
||||
}
|
||||
|
||||
&-content {
|
||||
padding: 0;
|
||||
margin-left: 40rpx;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
@ -342,6 +361,20 @@ const handleSelectAttr = () => {
|
||||
justify-content: space-between;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
&-storeName {
|
||||
-webkit-line-clamp: 2;
|
||||
}
|
||||
|
||||
&-info {
|
||||
.goods-price {
|
||||
font-size: 34rpx;
|
||||
}
|
||||
|
||||
.goods-price-original {
|
||||
font-size: 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -361,9 +394,6 @@ const handleSelectAttr = () => {
|
||||
padding: 0 10rpx;
|
||||
}
|
||||
|
||||
&-info {
|
||||
}
|
||||
|
||||
&-label {
|
||||
line-height: 38rpx;
|
||||
font-size: 24rpx;
|
||||
@ -390,113 +420,6 @@ const handleSelectAttr = () => {
|
||||
|
||||
}
|
||||
|
||||
&-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;
|
||||
@ -507,7 +430,6 @@ const handleSelectAttr = () => {
|
||||
opacity: 1;
|
||||
border-radius: 0rpx;
|
||||
padding: 0 10rpx;
|
||||
|
||||
margin-bottom: 28rpx;
|
||||
|
||||
&-label {
|
||||
@ -528,35 +450,6 @@ const handleSelectAttr = () => {
|
||||
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 {
|
||||
|
||||
Reference in New Issue
Block a user