Compare commits
2 Commits
01500366f2
...
7dcc94c937
| Author | SHA1 | Date |
|---|---|---|
tangxinyue
|
7dcc94c937 | |
|
tangxinyue
|
0a87094581 |
|
|
@ -0,0 +1,461 @@
|
||||||
|
<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>
|
||||||
|
|
@ -54,7 +54,8 @@
|
||||||
{
|
{
|
||||||
"path": "jingdong/list-index",
|
"path": "jingdong/list-index",
|
||||||
"style": {
|
"style": {
|
||||||
"navigationBarTitleText": "京东列表首页"
|
"navigationBarTitleText": "京东列表首页",
|
||||||
|
"navigationStyle": "custom"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|
|
||||||
|
|
@ -213,7 +213,10 @@ import {
|
||||||
util,
|
util,
|
||||||
numberUtil
|
numberUtil
|
||||||
} from '@/utils/common.js';
|
} from '@/utils/common.js';
|
||||||
const { appContext, proxy } = getCurrentInstance();
|
const {
|
||||||
|
appContext,
|
||||||
|
proxy
|
||||||
|
} = getCurrentInstance();
|
||||||
|
|
||||||
const statusBarHeight = ref(0);
|
const statusBarHeight = ref(0);
|
||||||
const editPopup = ref(null);
|
const editPopup = ref(null);
|
||||||
|
|
@ -604,7 +607,6 @@ const goBack = () => {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin-top: 20rpx;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.status-box {
|
.status-box {
|
||||||
|
|
@ -631,8 +633,8 @@ const goBack = () => {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: baseline;
|
align-items: baseline;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
margin-top: 40rpx;
|
margin-top: 20rpx;
|
||||||
margin-bottom: 72rpx;
|
margin-bottom: 60rpx;
|
||||||
|
|
||||||
.symbol {
|
.symbol {
|
||||||
font-size: 68rpx;
|
font-size: 68rpx;
|
||||||
|
|
@ -669,6 +671,7 @@ const goBack = () => {
|
||||||
|
|
||||||
.content-section {
|
.content-section {
|
||||||
padding: 24rpx;
|
padding: 24rpx;
|
||||||
|
padding-bottom: 16rpx;
|
||||||
background-color: #F5F5F5;
|
background-color: #F5F5F5;
|
||||||
border-radius: 30rpx 30rpx 0 0;
|
border-radius: 30rpx 30rpx 0 0;
|
||||||
}
|
}
|
||||||
|
|
@ -981,7 +984,7 @@ const goBack = () => {
|
||||||
}
|
}
|
||||||
|
|
||||||
.footer-section {
|
.footer-section {
|
||||||
padding: 8rpx 40rpx 0;
|
padding: 0px 40rpx 0;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
padding-bottom: 24rpx;
|
padding-bottom: 24rpx;
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<view>
|
<view class="top-fixed">
|
||||||
<nav-bar title="京东" bgColor="#F0F4F9">
|
<nav-bar title="京东" bgColor="#F0F4F9">
|
||||||
<template v-slot:center>
|
<template v-slot:center>
|
||||||
<view class="search-box">
|
<view class="search-box">
|
||||||
|
|
@ -8,24 +8,231 @@
|
||||||
<input class="input" type="text" placeholder="搜索我的订单" disabled />
|
<input class="input" type="text" placeholder="搜索我的订单" disabled />
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
<template v-slot:right>
|
||||||
|
<view class="right-box">
|
||||||
|
<image class="gift icon" src="/static/image/shopping/jingdong/gift.png" mode="aspectFit">
|
||||||
|
</image>
|
||||||
|
<image class="more icon" src="/static/image/shopping/jingdong/more.png" mode="aspectFit">
|
||||||
|
</image>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
</nav-bar>
|
</nav-bar>
|
||||||
|
<view class="tab-list">
|
||||||
|
<view class="tab-item" v-for="(item, index) in tabList" :key="index"
|
||||||
|
:class="{ active: currentTab === index }" @click="switchTab(index)">
|
||||||
|
<text class="title">{{ item.name }}</text>
|
||||||
|
<view class="line" v-if="currentTab === index"></view>
|
||||||
|
<image v-if="item.icon" class="badge-icon" :src="item.icon" mode="heightFix"></image>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="filter-wrapper">
|
||||||
|
<scroll-view class="filter-scroll" scroll-x="true" :show-scrollbar="false">
|
||||||
|
<view class="filter-list">
|
||||||
|
<view class="filter-item" v-for="(item, index) in filterList" :key="index"
|
||||||
|
:class="{ active: currentFilter === index }" @click="switchFilter(index)">
|
||||||
|
<text class="text">{{ item.name }}</text>
|
||||||
|
<text class="close-icon" v-if="currentFilter === index">×</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</scroll-view>
|
||||||
|
<view class="filter-btn">
|
||||||
|
<image class="filter-icon" src="/static/image/shopping/jingdong/shaixuan.png" mode="aspectFit"></image>
|
||||||
|
<text class="filter-text">筛选</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="content" :style="{ paddingTop: contentPaddingTop }">
|
||||||
|
<shopping-card v-for="(item, index) in mockOrderList" :key="index" :item="item"></shopping-card>
|
||||||
|
</view>
|
||||||
|
<view class="bottom-fixed">
|
||||||
|
<view class="bottom-item">
|
||||||
|
<image class="like-icon" src="/static/image/shopping/jingdong/weinituijian.png" mode="aspectFit"></image>
|
||||||
|
<text>为你推荐</text>
|
||||||
|
</view>
|
||||||
|
<view class="upload-screenshot-box">
|
||||||
|
<view class="upload-screenshot-content">
|
||||||
|
<image class="upload-screenshot" src="/static/image/common/upload-screenshot.png" mode="aspectFit">
|
||||||
|
</image>
|
||||||
|
<view class="upload-screenshot-text">长按替换截图</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
|
import { ref, onMounted, getCurrentInstance } from 'vue';
|
||||||
|
import ShoppingCard from '@/components/shopping/jingdong/shopping-card.vue';
|
||||||
|
|
||||||
|
const contentPaddingTop = ref('0px');
|
||||||
|
const instance = getCurrentInstance();
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
setTimeout(() => {
|
||||||
|
const query = uni.createSelectorQuery().in(instance.proxy);
|
||||||
|
query.select('.top-fixed').boundingClientRect(data => {
|
||||||
|
if (data) {
|
||||||
|
contentPaddingTop.value = data.height + 'px';
|
||||||
|
}
|
||||||
|
}).exec();
|
||||||
|
}, 100);
|
||||||
|
});
|
||||||
|
|
||||||
|
const currentTab = ref(0);
|
||||||
|
const tabList = ref([
|
||||||
|
{ name: '全部' },
|
||||||
|
{ name: '购物' },
|
||||||
|
{ name: '秒送', icon: '/static/image/shopping/jingdong/waimai.png' },
|
||||||
|
{ name: '服务', icon: '/static/image/shopping/jingdong/jiazheng.png', disabled: true }
|
||||||
|
]);
|
||||||
|
|
||||||
|
const switchTab = (index) => {
|
||||||
|
if (tabList.value[index].disabled) return;
|
||||||
|
currentTab.value = index;
|
||||||
|
};
|
||||||
|
|
||||||
|
const currentFilter = ref(1);
|
||||||
|
const filterList = ref([
|
||||||
|
{ name: '待付款' },
|
||||||
|
{ name: '待收货' },
|
||||||
|
{ name: '待使用' },
|
||||||
|
{ name: '已完成' },
|
||||||
|
{ name: '待评价' },
|
||||||
|
{ name: '已取消' }
|
||||||
|
]);
|
||||||
|
|
||||||
|
const switchFilter = (index) => {
|
||||||
|
currentFilter.value = index;
|
||||||
|
};
|
||||||
|
|
||||||
|
const mockOrderList = ref([
|
||||||
|
{
|
||||||
|
shopType: 'self',
|
||||||
|
shopName: '安野屋 (AARYE) 京联名哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈好梦',
|
||||||
|
statusType: 'warning',
|
||||||
|
statusDesc: '20小时11分钟',
|
||||||
|
image: '/static/image/shopping/jingdong/product1.png',
|
||||||
|
title: '安野哈哈哈哈哈哈哈哈哈哈哈哈好好',
|
||||||
|
desc: '联名哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈好梦',
|
||||||
|
tags: ['无理由退货政策'],
|
||||||
|
price: '69.00',
|
||||||
|
count: 1,
|
||||||
|
promoType: 'text',
|
||||||
|
promoHighlight: '白条支付券0.5元优惠券',
|
||||||
|
buttons: [
|
||||||
|
{ text: '取消订单', type: 'default' },
|
||||||
|
{ text: '查看发票', type: 'default' },
|
||||||
|
{ text: '修改订单', type: 'default' },
|
||||||
|
{ text: '去支付', type: 'primary', badge: '减0.5元' }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
shopType: 'none',
|
||||||
|
shopName: '甜小南旗舰店',
|
||||||
|
status: '正在出库',
|
||||||
|
statusColor: 'red',
|
||||||
|
trackingTitle: '仓库处理中',
|
||||||
|
trackingDesc: '预计 3月12日24:00 前发货，3月15日 24:00 前送达',
|
||||||
|
trackingTime: '2026-03-10 15:14:30',
|
||||||
|
image: '/static/image/shopping/jingdong/product1.png',
|
||||||
|
title: '安野哈哈哈哈哈哈哈哈哈哈哈哈好好',
|
||||||
|
desc: '联名哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈好梦',
|
||||||
|
tags: ['无理由退货政策'],
|
||||||
|
price: '69.00',
|
||||||
|
count: 1,
|
||||||
|
promoType: 'plus',
|
||||||
|
promoText: '告别凑单, 享免运优惠',
|
||||||
|
buttons: [
|
||||||
|
{ text: '查看发票', type: 'default' },
|
||||||
|
{ text: '再次购买', type: 'default' },
|
||||||
|
{ text: '申请退款', type: 'default' },
|
||||||
|
{ text: '修改订单', type: 'default' }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
shopType: 'self',
|
||||||
|
shopName: '甜小南旗舰店',
|
||||||
|
status: '完成',
|
||||||
|
statusColor: 'gray',
|
||||||
|
trackingTitle: '已签收',
|
||||||
|
trackingDesc: '您的订单已签收，可对快递员的服务进行评价或打赏哦~',
|
||||||
|
trackingTime: '2026-03-10 15:14:30',
|
||||||
|
image: '/static/image/shopping/jingdong/product1.png',
|
||||||
|
title: '安野哈哈哈哈哈哈哈哈哈哈哈哈好好',
|
||||||
|
desc: '联名哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈好梦',
|
||||||
|
tags: ['无理由退货政策'],
|
||||||
|
price: '69.00',
|
||||||
|
count: 1,
|
||||||
|
promoType: 'plus',
|
||||||
|
promoText: '告别凑单, 享免运优惠',
|
||||||
|
hasMore: true,
|
||||||
|
buttons: [
|
||||||
|
{ text: '卖了换钱', type: 'default' },
|
||||||
|
{ text: '退还/售后', type: 'default' },
|
||||||
|
{ text: '再次购买', type: 'primary' }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
shopType: 'jd',
|
||||||
|
shopName: '甜小南旗舰店',
|
||||||
|
status: '完成',
|
||||||
|
statusColor: 'gray',
|
||||||
|
image: '/static/image/shopping/jingdong/product1.png',
|
||||||
|
title: '安野哈哈哈哈哈哈哈哈哈哈哈哈好好',
|
||||||
|
desc: '联名哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈好梦',
|
||||||
|
tags: ['无理由退货政策'],
|
||||||
|
price: '1669.00',
|
||||||
|
count: 1,
|
||||||
|
hasMore: true,
|
||||||
|
buttons: [
|
||||||
|
{ text: '再次购买', type: 'default' },
|
||||||
|
{ text: '申请退款', type: 'default' },
|
||||||
|
{ text: '修改订单', type: 'default' }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
shopType: 'self',
|
||||||
|
shopName: '甜小南旗舰店',
|
||||||
|
status: '已取消',
|
||||||
|
statusColor: 'gray',
|
||||||
|
image: '/static/image/shopping/jingdong/product1.png',
|
||||||
|
title: '安野哈哈哈哈哈哈哈哈哈哈哈哈好好',
|
||||||
|
desc: '联名哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈好梦',
|
||||||
|
tags: ['无理由退货政策'],
|
||||||
|
price: '1669.00',
|
||||||
|
count: 1,
|
||||||
|
buttons: [
|
||||||
|
{ text: '再次购买', type: 'default' },
|
||||||
|
{ text: '申请退款', type: 'default' },
|
||||||
|
{ text: '修改订单', type: 'primary' }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]);
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="less">
|
<style lang="less">
|
||||||
|
.top-fixed {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
z-index: 999;
|
||||||
|
background-color: #F0F4F9;
|
||||||
|
}
|
||||||
|
|
||||||
::v-deep .uni-navbar__header-btns {
|
::v-deep .uni-navbar__header-btns {
|
||||||
width: auto !important;
|
width: auto !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
::v-deep .uni-navbar__header-container {
|
||||||
|
padding-right: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
.search-box {
|
.search-box {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
border-radius: 12rpx;
|
border-radius: 12rpx;
|
||||||
padding: 12rpx 16rpx;
|
padding: 0 16rpx;
|
||||||
|
height: 60rpx;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
border: 1rpx solid #E5E5E5;
|
border: 1rpx solid #E5E5E5;
|
||||||
|
|
@ -44,4 +251,181 @@
|
||||||
color: #CCCCCC;
|
color: #CCCCCC;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.right-box {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
width: 40rpx;
|
||||||
|
height: 40rpx;
|
||||||
|
margin-left: 22rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-list {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 16rpx 36rpx 10rpx;
|
||||||
|
background-color: #F0F4F9;
|
||||||
|
|
||||||
|
.tab-item {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-right: 58rpx;
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #1A1A1A;
|
||||||
|
font-weight: 700;
|
||||||
|
line-height: 28rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
.title {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #F51919;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.line {
|
||||||
|
position: absolute;
|
||||||
|
bottom: -10rpx;
|
||||||
|
left: -5%;
|
||||||
|
transform: translateX(50%);
|
||||||
|
width: 30rpx;
|
||||||
|
height: 4rpx;
|
||||||
|
background-color: #F51919;
|
||||||
|
border-radius: 4rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.badge-icon {
|
||||||
|
position: relative;
|
||||||
|
top: 0;
|
||||||
|
margin-left: 2rpx;
|
||||||
|
height: 32rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-wrapper {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
height: 64rpx;
|
||||||
|
padding: 0 0 0 24rpx;
|
||||||
|
background-color: #F0F4F9;
|
||||||
|
margin-top: 10rpx;
|
||||||
|
margin-bottom: 26rpx;
|
||||||
|
|
||||||
|
.filter-scroll {
|
||||||
|
flex: 1;
|
||||||
|
width: 0;
|
||||||
|
white-space: nowrap;
|
||||||
|
|
||||||
|
.filter-list {
|
||||||
|
height: 88rpx;
|
||||||
|
line-height: 88rpx;
|
||||||
|
padding-right: 24rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-item {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
vertical-align: middle;
|
||||||
|
height: 56rpx;
|
||||||
|
padding: 0 24rpx;
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
margin-right: 16rpx;
|
||||||
|
border: 2rpx solid transparent;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
.text {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #1A1A1A;
|
||||||
|
}
|
||||||
|
|
||||||
|
.close-icon {
|
||||||
|
font-size: 18px;
|
||||||
|
color: #E40C24;
|
||||||
|
margin-top: -10rpx;
|
||||||
|
line-height: 14px;
|
||||||
|
margin-left: 6rpx;
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
background-color: #FFECF5;
|
||||||
|
border-color: #E40C24;
|
||||||
|
|
||||||
|
.text {
|
||||||
|
color: #E40C24;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-btn {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 82rpx;
|
||||||
|
height: 64rpx;
|
||||||
|
background-color: #F0F4F9;
|
||||||
|
position: relative;
|
||||||
|
z-index: 10;
|
||||||
|
box-shadow: -10rpx 0 10rpx -10rpx rgba(0, 0, 0, 0.1);
|
||||||
|
|
||||||
|
.filter-icon {
|
||||||
|
width: 28rpx;
|
||||||
|
height: 28rpx;
|
||||||
|
margin-bottom: 4rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-text {
|
||||||
|
font-size: 20rpx;
|
||||||
|
line-height: 20rpx;
|
||||||
|
color: #575757;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
padding: 0 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
color: #1A1A1A;
|
||||||
|
font-size: 28rpx;
|
||||||
|
line-height: 26rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
margin-bottom: 22rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.like-icon {
|
||||||
|
width: 32rpx;
|
||||||
|
height: 32rpx;
|
||||||
|
margin-right: 8rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.upload-screenshot-box {
|
||||||
|
width: 100%;
|
||||||
|
height: 540rpx;
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
.upload-screenshot {
|
||||||
|
width: 92rpx;
|
||||||
|
height: 92rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 952 B |
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 256 B |
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 941 B |
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
Loading…
Reference in New Issue