715 lines
24 KiB
Vue
715 lines
24 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>
|
|
<view class="tag waimai-tag" v-if="item.shopType === 'waimai'">外卖</view>
|
|
<image class="jd-tag" v-if="item.shopType === 'jd'" src="/static/image/shopping/jingdong/JD.png">
|
|
</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.status === '等待付款'" 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="{ red: item.statusColor === 'red' || item.status === '正在出库' || item.status === '商家备餐中' || item.status === '骑手到店取餐中' || item.status === '骑手已到店' }">{{
|
|
item.status }}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- Tracking -->
|
|
<view class="tracking-box" :class="{ 'waimai-tracking': item.shopType === 'waimai' }"
|
|
v-if="item.trackingTitle || item.trackingDesc">
|
|
<view class="waimai-tracking-icon" v-if="item.shopType === 'waimai'">
|
|
<image style="width: 32rpx; height: 32rpx;" src="/static/image/shopping/jingdong/waimai-logo.png"
|
|
mode="aspectFit" v-if="!item.trackingIcon">
|
|
</image>
|
|
<!-- <image style="width: 28rpx; height: 28rpx;" :src="item.trackingIcon" mode="aspectFit" v-else></image> -->
|
|
</view>
|
|
<view class="tracking-content">
|
|
<view class="tracking-header" v-if="item.shopType !== 'waimai'">
|
|
<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>
|
|
<view class="tracking-main-title" v-else>
|
|
<view class="rich-title">预计<span style="color:#E40C24">{{ item.trackingTitle }}</span> 可送达</view>
|
|
</view>
|
|
<text class="tracking-desc" v-if="item.trackingDesc">{{ item.trackingDesc }}</text>
|
|
<text class="tracking-time">{{ item.trackingTime }}</text>
|
|
</view>
|
|
<uni-icons v-if="item.shopType !== 'waimai'" class="right-icon" type="right" size="14"
|
|
color="#3D3D3D"></uni-icons>
|
|
</view>
|
|
|
|
<!-- Product -->
|
|
<view class="product-box"
|
|
:class="{ multiple: (item.products && item.products.length > 1) || (item.images && item.images.length > 0) }">
|
|
<template v-if="item.products && item.products.length > 1">
|
|
<scroll-view class="product-images-scroll" scroll-x :show-scrollbar="false">
|
|
<image class="product-img small" v-for="(prod, idx) in item.products" :key="idx" :src="prod.image"
|
|
mode="aspectFill"></image>
|
|
</scroll-view>
|
|
</template>
|
|
<template v-else-if="item.products && item.products.length === 1">
|
|
<image class="product-img" :src="item.products[0].image" mode="aspectFill"></image>
|
|
<view class="product-info">
|
|
<text class="product-title">{{ item.products[0].title }}</text>
|
|
<text class="product-desc" v-if="item.products[0].desc">{{ item.products[0].desc }}</text>
|
|
<view class="product-tags" v-if="item.products[0].tags && item.products[0].tags.length">
|
|
<text class="tag" v-for="(tag, index) in item.products[0].tags" :key="index">{{ tag }}</text>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
<template v-else-if="item.images && item.images.length > 0">
|
|
<scroll-view class="product-images-scroll" scroll-x :show-scrollbar="false">
|
|
<image class="product-img small" v-for="(img, idx) in item.images" :key="idx" :src="img"
|
|
mode="aspectFill"></image>
|
|
</scroll-view>
|
|
</template>
|
|
<template v-else>
|
|
<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>
|
|
</template>
|
|
<view class="product-price-box">
|
|
<view class="price-wrap wx-font-regular">
|
|
<text class="price-symbol">￥</text>
|
|
<text class="price-num">{{ item.price || (item.products && item.products[0] &&
|
|
item.products[0].price) }}</text>
|
|
</view>
|
|
<text class="product-count"
|
|
v-if="item.count || (item.products && item.products[0] && item.products[0].count)">共{{
|
|
item.count || (item.products && item.products[0] && item.products[0].count) }}件</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- Promo -->
|
|
<view class="promo-box"
|
|
:class="{ 'plus-promo': item.promoType === 'plus', 'cashback-promo': item.promoType === 'cashback', 'coupon-promo': item.promoType === 'coupon' }"
|
|
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-if="item.promoType === 'cashback'">
|
|
<text class="promo-text">{{ item.promoText }} <text class="highlight" v-if="item.promoHighlight">{{
|
|
item.promoHighlight }}</text></text>
|
|
<text class="promo-action red">{{ item.promoAction || '点击领取' }} <uni-icons type="right" size="10"
|
|
color="#ED1C04"></uni-icons></text>
|
|
</template>
|
|
<template v-else-if="item.promoType === 'coupon'">
|
|
<view class="coupon-row">
|
|
<view class="coupon-tag">购物券</view>
|
|
<text class="promo-text">{{ item.promoText }}</text>
|
|
</view>
|
|
<text class="promo-action red">{{ item.promoAction || '去领券' }} <uni-icons type="right" size="10"
|
|
color="#ED1C04"></uni-icons></text>
|
|
</template>
|
|
<template v-else-if="item.promoType === 'text'">
|
|
<text class="promo-text text-basic">本单可享 <text class="highlight">{{ item.promoHighlight
|
|
}}</text>，快去支付吧~</text>
|
|
</template>
|
|
<template v-else>
|
|
<text class="promo-text text-basic">当笔订单返现成功到账，<text style="color: #E31700;">点击领取</text></text>
|
|
</template>
|
|
</view>
|
|
|
|
<!-- Footer -->
|
|
<view class="footer-actions">
|
|
<view class="more-box" v-if="item.status == '完成' && item.shopType != 'waimai'">
|
|
<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 getButtons(item.shopType, item.status, item)" :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, computed } from 'vue';
|
|
|
|
const props = defineProps({
|
|
item: {
|
|
type: Object,
|
|
required: true,
|
|
default: () => ({})
|
|
}
|
|
});
|
|
|
|
const getButtons = (shopType, status, item) => {
|
|
const buttons = [];
|
|
if (status == '等待付款') {
|
|
buttons.push({ text: '取消订单', type: 'default' });
|
|
buttons.push({ text: '查看发票', type: 'default' });
|
|
buttons.push({ text: '修改订单', type: 'default' });
|
|
buttons.push({ text: '去支付', type: 'primary' });
|
|
}
|
|
if (shopType == 'waimai') {
|
|
|
|
if (status == '骑手到店取餐中') {
|
|
buttons.push({ text: '申请退款', type: 'default' });
|
|
buttons.push({ text: '查看发票', type: 'default' });
|
|
}
|
|
if (status == '商家备餐中') {
|
|
buttons.push({ text: '申请退款', type: 'default' });
|
|
buttons.push({ text: '查看发票', type: 'default' });
|
|
}
|
|
if (status == '完成') {
|
|
buttons.push({ text: '删除订单', type: 'default' });
|
|
buttons.push({ text: '查看发票', type: 'default' });
|
|
buttons.push({ text: '退换/售后', type: 'default' });
|
|
buttons.push({ text: '再次购买', type: 'primary' });
|
|
}
|
|
if (status == '已取消') {
|
|
buttons.push({ text: '删除订单', type: 'default' });
|
|
buttons.push({ text: '钱款去向', type: 'default' });
|
|
buttons.push({ text: '再次购买', type: 'primary' });
|
|
}
|
|
} else if (shopType != 'waimai') {
|
|
if (status == '正在出库') {
|
|
buttons.push({ text: '查看发票', type: 'default' });
|
|
buttons.push({ text: '再次购买', type: 'default' });
|
|
buttons.push({ text: '申请退款', type: 'default' });
|
|
buttons.push({ text: '修改订单', type: 'default' });
|
|
}
|
|
if (status == '完成') {
|
|
if (item?.trackingTitle == '已签收') {
|
|
buttons.push({ text: '卖了换钱', type: 'default' });
|
|
buttons.push({ text: '退还/售后', type: 'default' });
|
|
buttons.push({ text: '再次购买', type: 'primary' });
|
|
} else {
|
|
buttons.push({ text: '再次购买', type: 'default' });
|
|
buttons.push({ text: '申请退款', type: 'default' });
|
|
buttons.push({ text: '修改订单', type: 'default' });
|
|
}
|
|
}
|
|
if (status == '已取消') {
|
|
buttons.push({ text: '再次购买', type: 'default' });
|
|
buttons.push({ text: '申请退款', type: 'default' });
|
|
buttons.push({ text: '修改订单', type: 'primary' });
|
|
}
|
|
}
|
|
console.log(shopType, status);
|
|
return buttons;
|
|
}
|
|
</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;
|
|
}
|
|
|
|
&.waimai-tag {
|
|
background-color: #FEE74B;
|
|
color: #1A1A1A;
|
|
}
|
|
}
|
|
|
|
.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;
|
|
|
|
.waimai-status-warning {
|
|
display: flex;
|
|
align-items: center;
|
|
height: 32rpx;
|
|
border: 2rpx solid #ED1C04;
|
|
border-radius: 16rpx;
|
|
overflow: hidden;
|
|
|
|
.w-badge {
|
|
background-color: #ED1C04;
|
|
color: #FFFFFF;
|
|
font-size: 20rpx;
|
|
height: 100%;
|
|
line-height: 32rpx;
|
|
padding: 0 10rpx;
|
|
}
|
|
|
|
.w-time {
|
|
color: #ED1C04;
|
|
font-size: 20rpx;
|
|
line-height: 32rpx;
|
|
padding: 0 10rpx;
|
|
background-color: #FFFFFF;
|
|
}
|
|
}
|
|
|
|
.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;
|
|
color: #87868E;
|
|
|
|
&.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;
|
|
|
|
&.waimai-tracking {
|
|
align-items: flex-start;
|
|
background-color: #F7F8FC;
|
|
border-radius: 12rpx;
|
|
padding: 12rpx 20rpx 18rpx;
|
|
|
|
.waimai-tracking-icon {
|
|
margin-right: 10rpx;
|
|
margin-top: 2rpx;
|
|
}
|
|
|
|
.tracking-main-title {
|
|
font-size: 26rpx;
|
|
color: #1A1A1A;
|
|
font-weight: 700;
|
|
line-height: 36rpx;
|
|
margin-bottom: 8rpx;
|
|
}
|
|
|
|
.tracking-desc {
|
|
margin-top: 0;
|
|
font-size: 22rpx;
|
|
line-height: 22rpx;
|
|
color: #1A1A1A;
|
|
margin-left: -42rpx;
|
|
}
|
|
|
|
.tracking-time {
|
|
margin-left: -42rpx;
|
|
}
|
|
}
|
|
|
|
.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;
|
|
|
|
&.multiple {
|
|
.product-images-scroll {
|
|
flex: 1;
|
|
width: 0;
|
|
white-space: nowrap;
|
|
|
|
.product-img {
|
|
display: inline-block;
|
|
width: 132rpx;
|
|
height: 132rpx;
|
|
margin-right: 14rpx;
|
|
border-radius: 12rpx;
|
|
background-color: #F5F5F5;
|
|
}
|
|
}
|
|
|
|
.product-price-box {
|
|
margin-left: 10rpx;
|
|
justify-content: center;
|
|
align-items: flex-end;
|
|
}
|
|
}
|
|
|
|
.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,
|
|
&.cashback-promo,
|
|
&.coupon-promo {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
height: 52rpx;
|
|
padding: 0 16rpx;
|
|
border-radius: 8rpx;
|
|
}
|
|
|
|
&.plus-promo {
|
|
background-color: #FFEDDF;
|
|
|
|
.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;
|
|
}
|
|
}
|
|
|
|
&.cashback-promo,
|
|
&.coupon-promo {
|
|
background-color: #FCF5F5;
|
|
|
|
.promo-text {
|
|
font-size: 22rpx;
|
|
line-height: 22rpx;
|
|
color: #1A1A1A;
|
|
|
|
.highlight {
|
|
color: #ED1C04;
|
|
}
|
|
}
|
|
|
|
.promo-action {
|
|
font-size: 22rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
&.red {
|
|
color: #ED1C04;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.coupon-promo {
|
|
.coupon-row {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.coupon-tag {
|
|
font-size: 20rpx;
|
|
background-color: #ED1C04;
|
|
color: #FFFFFF;
|
|
padding: 2rpx 8rpx;
|
|
border-radius: 4rpx;
|
|
margin-right: 8rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.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 {
|
|
white-space: nowrap;
|
|
font-size: 22rpx;
|
|
color: #87868E;
|
|
}
|
|
}
|
|
|
|
.empty-space {
|
|
flex: 1;
|
|
}
|
|
|
|
.action-buttons {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
justify-content: flex-end;
|
|
|
|
.btn {
|
|
position: relative;
|
|
height: 56rpx;
|
|
line-height: 56rpx;
|
|
padding: 0 24rpx;
|
|
border-radius: 8rpx;
|
|
font-size: 22rpx;
|
|
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>
|