462 lines
13 KiB
Vue
462 lines
13 KiB
Vue
<template>
|
|
<view class="shopping-card">
|
|
<!-- Header -->
|
|
<view class="card-header">
|
|
<view class="shop-info">
|
|
<view class="tag self-tag" v-if="item.shopType === 'self'">自营</view>
|
|
<image class="jd-tag" v-if="item.shopType === 'jd'" src="/static/image/shopping/jingdong/JD.png">JD
|
|
</image>
|
|
<text class="shop-name">{{ item.shopName }}</text>
|
|
<uni-icons class="right-icon" type="right" size="12" color="#1A1A1A"></uni-icons>
|
|
</view>
|
|
<view class="order-status">
|
|
<view v-if="item.statusType === 'warning'" class="status-warning">
|
|
<image style="width: 116rpx;height: 30rpx;" src="/static/image/shopping/jingdong/dengdaifukuan.png">
|
|
</image>
|
|
<text class="status-desc" v-if="item.statusDesc">{{ item.statusDesc }}</text>
|
|
</view>
|
|
<text v-else class="status-text" :class="item.statusColor || 'gray'">{{ item.status }}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- Tracking -->
|
|
<view class="tracking-box" v-if="item.trackingTitle || item.trackingDesc">
|
|
<view class="tracking-content">
|
|
<view class="tracking-header">
|
|
<image class="truck-icon" v-if="!item.trackingIcon"
|
|
src="/static/image/shopping/jingdong/cangku.png">
|
|
</image>
|
|
<image class="truck-icon" :src="item.trackingIcon" mode="aspectFit" v-else></image>
|
|
<text class="tracking-title">{{ item.trackingTitle }}</text>
|
|
</view>
|
|
<text class="tracking-desc" v-if="item.trackingDesc">{{ item.trackingDesc }}</text>
|
|
<text class="tracking-time">{{ item.trackingTime }}</text>
|
|
</view>
|
|
<uni-icons class="right-icon" type="right" size="14" color="#3D3D3D"></uni-icons>
|
|
</view>
|
|
|
|
<!-- Product -->
|
|
<view class="product-box">
|
|
<image class="product-img" :src="item.image" mode="aspectFill"></image>
|
|
<view class="product-info">
|
|
<text class="product-title">{{ item.title }}</text>
|
|
<text class="product-desc" v-if="item.desc">{{ item.desc }}</text>
|
|
<view class="product-tags" v-if="item.tags && item.tags.length">
|
|
<text class="tag" v-for="(tag, index) in item.tags" :key="index">{{ tag }}</text>
|
|
</view>
|
|
</view>
|
|
<view class="product-price-box">
|
|
<view class="price-wrap wx-font-regular">
|
|
<text class="price-symbol">￥</text>
|
|
<text class="price-num">{{ item.price }}</text>
|
|
</view>
|
|
<text class="product-count">共{{ item.count }}件</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- Promo -->
|
|
<view class="promo-box" :class="{ 'plus-promo': item.promoType === 'plus' }"
|
|
v-if="item.promoType || item.promoText || item.promoHighlight">
|
|
<template v-if="item.promoType === 'plus'">
|
|
<view class="plus-row">
|
|
<image class="plus-tag" src="/static/image/shopping/jingdong/plus.png"></image>
|
|
<text class="promo-text">{{ item.promoText }}</text>
|
|
</view>
|
|
<text class="promo-action">解锁权益 <uni-icons type="right" size="10" color="#654629"></uni-icons> </text>
|
|
</template>
|
|
<template v-else>
|
|
<text class="promo-text text-basic">本单可享 <text class="highlight">{{
|
|
item.promoHighlight }}</text>，快去支付吧~</text>
|
|
</template>
|
|
</view>
|
|
|
|
<!-- Footer -->
|
|
<view class="footer-actions">
|
|
<view class="more-box" v-if="item.hasMore">
|
|
<text class="more-text">更多</text>
|
|
</view>
|
|
<view class="empty-space" v-else></view>
|
|
<view class="action-buttons">
|
|
<view class="btn" :class="btn.type || 'default'" v-for="(btn, index) in item.buttons" :key="index"
|
|
@click="$emit('btnClick', btn)">
|
|
{{ btn.text }}
|
|
<view class="btn-badge" v-if="btn.badge">{{ btn.badge }}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { defineProps } from 'vue';
|
|
|
|
const props = defineProps({
|
|
item: {
|
|
type: Object,
|
|
required: true,
|
|
default: () => ({})
|
|
}
|
|
});
|
|
</script>
|
|
<style>
|
|
@import "/common/main.css";
|
|
</style>
|
|
<style lang="less" scoped>
|
|
.shopping-card {
|
|
background-color: #FFFFFF;
|
|
border-radius: 24rpx;
|
|
padding: 34rpx 18rpx 30rpx;
|
|
margin: 0 0 16rpx 0;
|
|
box-sizing: border-box;
|
|
|
|
.card-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 24rpx;
|
|
|
|
.shop-info {
|
|
flex: 1;
|
|
width: 20px;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.tag {
|
|
font-size: 20rpx;
|
|
padding: 2rpx 6rpx;
|
|
border-radius: 4rpx;
|
|
margin-right: 8rpx;
|
|
font-weight: 500;
|
|
color: #FFFFFF;
|
|
line-height: 26rpx;
|
|
flex-shrink: 0;
|
|
|
|
&.self-tag {
|
|
background-color: #FC3538;
|
|
}
|
|
}
|
|
|
|
.jd-tag {
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
flex-shrink: 0;
|
|
margin-right: 12rpx;
|
|
}
|
|
|
|
.shop-name {
|
|
white-space: nowrap;
|
|
font-size: 26rpx;
|
|
line-height: 26rpx;
|
|
color: #1A1A1A;
|
|
font-weight: 700;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
|
|
}
|
|
|
|
.right-icon {
|
|
margin-right: 48rpx;
|
|
}
|
|
}
|
|
|
|
.order-status {
|
|
flex-shrink: 0;
|
|
font-size: 26rpx;
|
|
|
|
.status-warning {
|
|
display: flex;
|
|
align-items: center;
|
|
background-color: #FEE4E5;
|
|
border-radius: 24rpx;
|
|
height: 30rpx;
|
|
padding-right: 8rpx;
|
|
|
|
.status-badge {
|
|
background-color: #E40C24;
|
|
color: #FFFFFF;
|
|
font-size: 22rpx;
|
|
padding: 0 12rpx;
|
|
height: 32rpx;
|
|
line-height: 32rpx;
|
|
border-radius: 16rpx;
|
|
margin-right: 8rpx;
|
|
}
|
|
|
|
.status-desc {
|
|
font-size: 22rpx;
|
|
line-height: 24rpx;
|
|
margin-left: 4rpx;
|
|
color: #ED1C04;
|
|
}
|
|
}
|
|
|
|
.status-text {
|
|
font-size: 22rpx;
|
|
|
|
&.red {
|
|
color: #ED1C04;
|
|
}
|
|
|
|
&.gray {
|
|
color: #999999;
|
|
}
|
|
|
|
&.black {
|
|
color: #1A1A1A;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.tracking-box {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
background-color: #F9F9F9;
|
|
padding: 12rpx 20rpx 18rpx;
|
|
border-radius: 12rpx;
|
|
margin-bottom: 24rpx;
|
|
|
|
.tracking-content {
|
|
flex: 1;
|
|
|
|
.tracking-header {
|
|
display: flex;
|
|
align-items: center;
|
|
height: 32rpx;
|
|
margin-bottom: 14rpx;
|
|
|
|
.truck-icon {
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
margin-right: 10rpx;
|
|
}
|
|
|
|
.tracking-title {
|
|
font-size: 26rpx;
|
|
color: #1A1A1A;
|
|
font-weight: 700;
|
|
}
|
|
}
|
|
|
|
.tracking-desc {
|
|
font-size: 22rpx;
|
|
line-height: 22rpx;
|
|
color: #1A1A1A;
|
|
display: block;
|
|
|
|
}
|
|
|
|
.tracking-time {
|
|
margin-top: 12rpx;
|
|
font-size: 22rpx;
|
|
line-height: 22rpx;
|
|
color: #767676;
|
|
}
|
|
}
|
|
|
|
.right-icon {}
|
|
}
|
|
|
|
.product-box {
|
|
display: flex;
|
|
margin-bottom: 24rpx;
|
|
align-items: center;
|
|
|
|
.product-img {
|
|
width: 144rpx;
|
|
height: 144rpx;
|
|
border-radius: 12rpx;
|
|
flex-shrink: 0;
|
|
margin-right: 14rpx;
|
|
background-color: #F5F5F5;
|
|
}
|
|
|
|
.product-info {
|
|
flex: 1;
|
|
width: 100px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.product-title {
|
|
font-size: 26rpx;
|
|
color: #1A1A1A;
|
|
line-height: 36rpx;
|
|
white-space: nowrap;
|
|
text-overflow: hidden;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.product-desc {
|
|
font-size: 22rpx;
|
|
line-height: 24rpx;
|
|
margin-top: 8rpx;
|
|
color: #87868E;
|
|
overflow: hidden;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
line-clamp: 2;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.product-tags {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
margin-top: 8rpx;
|
|
|
|
.tag {
|
|
font-size: 20rpx;
|
|
line-height: 20rpx;
|
|
color: #C59446;
|
|
margin-right: 12rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.product-price-box {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-end;
|
|
margin-left: 20rpx;
|
|
|
|
.price-wrap {
|
|
color: #1A1A1A;
|
|
font-size: 30rpx;
|
|
margin-bottom: 4rpx;
|
|
display: flex;
|
|
align-items: baseline;
|
|
|
|
.price-symbol {
|
|
font-weight: 500;
|
|
}
|
|
|
|
.price-num {
|
|
font-weight: 600;
|
|
}
|
|
}
|
|
|
|
.product-count {
|
|
font-size: 22rpx;
|
|
color: #87868E;
|
|
}
|
|
}
|
|
}
|
|
|
|
.promo-box {
|
|
background-color: #FEEFF2;
|
|
padding: 14rpx;
|
|
border-radius: 4rpx;
|
|
margin-bottom: 24rpx;
|
|
font-size: 22rpx;
|
|
line-height: 22rpx;
|
|
|
|
&.plus-promo {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
background-color: #FFEDDF;
|
|
height: 52rpx;
|
|
padding: 0 16rpx;
|
|
border-radius: 8rpx;
|
|
|
|
.plus-row {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.plus-tag {
|
|
width: 56rpx;
|
|
height: 26rpx;
|
|
margin-right: 8rpx;
|
|
}
|
|
|
|
.promo-text {
|
|
font-size: 22rpx;
|
|
line-height: 22rpx;
|
|
color: #654629;
|
|
}
|
|
}
|
|
|
|
.promo-action {
|
|
font-size: 22rpx;
|
|
color: #A3824E;
|
|
}
|
|
}
|
|
|
|
.text-basic {
|
|
font-size: 22rpx;
|
|
line-height: 22rpx;
|
|
color: #1A1A1A;
|
|
display: block;
|
|
|
|
.highlight {
|
|
font-size: 22rpx;
|
|
line-height: 22rpx;
|
|
color: #E31700;
|
|
}
|
|
}
|
|
}
|
|
|
|
.footer-actions {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
.more-box {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.more-text {
|
|
font-size: 24rpx;
|
|
color: #999999;
|
|
}
|
|
}
|
|
|
|
.empty-space {
|
|
flex: 1;
|
|
}
|
|
|
|
.action-buttons {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
justify-content: flex-end;
|
|
|
|
.btn {
|
|
position: relative;
|
|
height: 52rpx;
|
|
line-height: 52rpx;
|
|
padding: 0 24rpx;
|
|
border-radius: 8rpx;
|
|
font-size: 24rpx;
|
|
margin-left: 16rpx;
|
|
border: 1rpx solid #C7C7C7;
|
|
color: #1A1A1A;
|
|
background-color: #FFFFFF;
|
|
|
|
&.primary {
|
|
border-color: #ED1C04;
|
|
color: #ED1C04;
|
|
}
|
|
|
|
.btn-badge {
|
|
box-sizing: border-box;
|
|
position: absolute;
|
|
top: -8px;
|
|
right: -1px;
|
|
background-image: url(/static/image/shopping/jingdong/bubble.png);
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
color: #FFFFFF;
|
|
font-size: 10px;
|
|
line-height: 11px;
|
|
padding: 2px 4px 0;
|
|
white-space: nowrap;
|
|
width: 45px;
|
|
height: 22px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|