Compare commits
No commits in common. "7dcc94c9375a682b7d5a9ece0cd4132638fb5c2c" and "01500366f2adf7b90820fce161cf43af2ff1be0e" have entirely different histories.
7dcc94c937
...
01500366f2
|
|
@ -1,461 +0,0 @@
|
|||
<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,8 +54,7 @@
|
|||
{
|
||||
"path": "jingdong/list-index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "京东列表首页",
|
||||
"navigationStyle": "custom"
|
||||
"navigationBarTitleText": "京东列表首页"
|
||||
}
|
||||
}
|
||||
]
|
||||
|
|
|
|||
|
|
@ -213,10 +213,7 @@ import {
|
|||
util,
|
||||
numberUtil
|
||||
} from '@/utils/common.js';
|
||||
const {
|
||||
appContext,
|
||||
proxy
|
||||
} = getCurrentInstance();
|
||||
const { appContext, proxy } = getCurrentInstance();
|
||||
|
||||
const statusBarHeight = ref(0);
|
||||
const editPopup = ref(null);
|
||||
|
|
@ -607,6 +604,7 @@ const goBack = () => {
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
.status-box {
|
||||
|
|
@ -633,8 +631,8 @@ const goBack = () => {
|
|||
display: flex;
|
||||
align-items: baseline;
|
||||
color: #fff;
|
||||
margin-top: 20rpx;
|
||||
margin-bottom: 60rpx;
|
||||
margin-top: 40rpx;
|
||||
margin-bottom: 72rpx;
|
||||
|
||||
.symbol {
|
||||
font-size: 68rpx;
|
||||
|
|
@ -671,7 +669,6 @@ const goBack = () => {
|
|||
|
||||
.content-section {
|
||||
padding: 24rpx;
|
||||
padding-bottom: 16rpx;
|
||||
background-color: #F5F5F5;
|
||||
border-radius: 30rpx 30rpx 0 0;
|
||||
}
|
||||
|
|
@ -984,7 +981,7 @@ const goBack = () => {
|
|||
}
|
||||
|
||||
.footer-section {
|
||||
padding: 0px 40rpx 0;
|
||||
padding: 8rpx 40rpx 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding-bottom: 24rpx;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<view class="top-fixed">
|
||||
<view>
|
||||
<nav-bar title="京东" bgColor="#F0F4F9">
|
||||
<template v-slot:center>
|
||||
<view class="search-box">
|
||||
|
|
@ -8,231 +8,24 @@
|
|||
<input class="input" type="text" placeholder="搜索我的订单" disabled />
|
||||
</view>
|
||||
</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>
|
||||
<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>
|
||||
</template>
|
||||
|
||||
<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>
|
||||
|
||||
<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 {
|
||||
width: auto !important;
|
||||
}
|
||||
|
||||
::v-deep .uni-navbar__header-container {
|
||||
padding-right: 0 !important;
|
||||
}
|
||||
|
||||
.search-box {
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
border-radius: 12rpx;
|
||||
padding: 0 16rpx;
|
||||
height: 60rpx;
|
||||
padding: 12rpx 16rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border: 1rpx solid #E5E5E5;
|
||||
|
|
@ -251,181 +44,4 @@ const mockOrderList = ref([
|
|||
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>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 952 B |
Binary file not shown.
|
Before Width: | Height: | Size: 2.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 256 B |
Binary file not shown.
|
Before Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 941 B |
Binary file not shown.
|
Before Width: | Height: | Size: 2.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.1 KiB |
Loading…
Reference in New Issue