Compare commits
No commits in common. "026d39a0e5d0c2fdbd5a57f879fb428421dd0fed" and "56e34166ba6955a8b8d5335c6c64277522e3dfba" have entirely different histories.
026d39a0e5
...
56e34166ba
|
|
@ -50,8 +50,8 @@ const menuList = ref([
|
||||||
bgColor: ["#FFF0DA", "#FFFFFF"],
|
bgColor: ["#FFF0DA", "#FFFFFF"],
|
||||||
btnBg: "#FF953C",
|
btnBg: "#FF953C",
|
||||||
shadowColor: "#FF953C",
|
shadowColor: "#FF953C",
|
||||||
url: "/pages/shopping/taobao/list-index"
|
// url: "/pages/shopping/taobao/list-index"
|
||||||
// url: ""
|
url: ""
|
||||||
}, {
|
}, {
|
||||||
name: "快手",
|
name: "快手",
|
||||||
icon: "kuaishou",
|
icon: "kuaishou",
|
||||||
|
|
|
||||||
|
|
@ -1,582 +0,0 @@
|
||||||
<template>
|
|
||||||
<view class="card-wrapper">
|
|
||||||
<view class="card-container" v-for="(item, index) in list" :key="index">
|
|
||||||
<!-- 顶部店铺和状态 -->
|
|
||||||
<view class="card-header">
|
|
||||||
<view class="shop-info">
|
|
||||||
<image class="taobao-logo" :src="`/static/image/shopping/taobao/${item.shopType}.png`"
|
|
||||||
mode="heightFix">
|
|
||||||
</image>
|
|
||||||
<text class="shop-name">{{ item.shopName || '淘宝店铺' }}</text>
|
|
||||||
<uni-icons style="margin-left: 4rpx;" type="right" size="10" color="#8C8C8C"></uni-icons>
|
|
||||||
<!-- <text class="iconfont icon-arrow-right arrow-icon">></text> -->
|
|
||||||
</view>
|
|
||||||
<view class="order-status" :class="item.statusType">
|
|
||||||
{{ item.statusText || getStatusText(item.statusType) }}
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<!-- 商品列表 -->
|
|
||||||
<view class="goods-list" @tap="goToDetail(item)">
|
|
||||||
<view class="goods-item" v-for="(goods, gIdx) in item.goodsList" :key="gIdx">
|
|
||||||
<image class="goods-img" :class="{ refunding: item.statusType === 'refunding' }"
|
|
||||||
:src="goods.image || '/static/default-goods.png'" mode="aspectFill"
|
|
||||||
:style="{ width: imgHeights[index + '-' + gIdx] ? imgHeights[index + '-' + gIdx] + 'px' : '', height: imgHeights[index + '-' + gIdx] ? imgHeights[index + '-' + gIdx] + 'px' : '' }">
|
|
||||||
</image>
|
|
||||||
<view class="goods-info" :id="'goods-info-' + index + '-' + gIdx">
|
|
||||||
<view class="goods-title-row">
|
|
||||||
<view class="good-info-box">
|
|
||||||
<text class="goods-title">{{ goods.title }}</text>
|
|
||||||
<view class="goods-spec" v-if="goods.specs">{{ goods.specs }}</view>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<view class="goods-price-box">
|
|
||||||
<text class="price-symbol wx-font-medium">￥</text>
|
|
||||||
<text class="price-val wx-font-medium">{{ goods.price }}</text>
|
|
||||||
<text class="goods-count">x{{ goods.count || 1 }}</text>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<view class="goods-tags"
|
|
||||||
v-if="goods.tags && goods.tags.length && item.statusType !== 'refunding'">
|
|
||||||
<text class="tag" v-for="(tag, tIdx) in goods.tags" :key="tIdx">{{ tag }}</text>
|
|
||||||
</view>
|
|
||||||
<!-- 单个商品的售后状态 -->
|
|
||||||
<view class="goods-evaluation" v-if="item.statusType == 'success'">
|
|
||||||
<view class="left">
|
|
||||||
<image style="width: 24rpx;height: 24rpx;margin-right: 8rpx;"
|
|
||||||
src='/static/image/shopping/taobao/pingjia.png'>
|
|
||||||
</image>
|
|
||||||
<text>评价将帮助70人</text>
|
|
||||||
</view>
|
|
||||||
<view class="right">
|
|
||||||
<image style="width: 24rpx;height: 24rpx;margin-right: 8rpx;"
|
|
||||||
src='/static/image/shopping/taobao/chaping.png'>
|
|
||||||
</image>
|
|
||||||
<text>差评</text>
|
|
||||||
<image style="width: 24rpx;height: 24rpx;margin-right: 8rpx;"
|
|
||||||
src='/static/image/shopping/taobao/zhongping.png'>
|
|
||||||
</image>
|
|
||||||
<text>中评</text>
|
|
||||||
<image style="width: 24rpx;height: 24rpx;margin-right: 8rpx;"
|
|
||||||
src='/static/image/shopping/taobao/haoping.png'>
|
|
||||||
</image>
|
|
||||||
<text>好评</text>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<!-- 各种提示信息 -->
|
|
||||||
<view v-if="item.statusType == 'wait_pay'" class="tips-box daifukuan">
|
|
||||||
<image class="tip-icon" src="/static/image/shopping/taobao/daifukuan.png"></image>
|
|
||||||
<text class="text">订单即将关闭，建议尽快付款</text>
|
|
||||||
</view>
|
|
||||||
<view v-else-if="item.statusType == 'wait_send'" class="tips-box daifahuo">
|
|
||||||
<image class="tip-icon" src="/static/image/shopping/taobao/daifahuo.png"></image>
|
|
||||||
<text class="title">待发货</text>
|
|
||||||
<text class="text">{{ item.statusDesc }}</text>
|
|
||||||
</view>
|
|
||||||
<view v-else-if="item.statusType == 'wait_recv'" class="tips-box yunshuzhong">
|
|
||||||
<image class="tip-icon"
|
|
||||||
:src="`/static/image/shopping/taobao/${item.isSignFor ? 'yiqianshou' : 'yunshuzhong'}.png`">
|
|
||||||
</image>
|
|
||||||
<text class="title">{{ item.isSignFor ? '已签收' : '运输中' }}</text>
|
|
||||||
<text class="text">{{ item.statusDesc }}</text>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<view v-else-if="item.statusType == 'refunding'" class="tips-box yunshuzhong">
|
|
||||||
<text class="title">退款成功</text>
|
|
||||||
<text class="text">{{ item.statusDesc }}</text>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<!-- 价格合计 -->
|
|
||||||
<view class="order-total">
|
|
||||||
<text class="total-label">共{{ getTotalCount(item.goodsList) }}件商品</text>
|
|
||||||
<text class="total-label">实付款</text>
|
|
||||||
<text class="total-symbol wx-font-medium">￥</text>
|
|
||||||
<text class="total-price wx-font-medium">{{ Number(
|
|
||||||
item.totalPrice).toFixed(2).split(".")[0] }}</text>
|
|
||||||
<text class="total-price wx-font-medium" style="font-size: 28rpx;">.{{ Number(
|
|
||||||
item.totalPrice).toFixed(2).split(".")[1] }}</text>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<!-- 底部按钮 -->
|
|
||||||
<view class="card-footer" v-if="getButtons(item.statusType).buttons.length > 0">
|
|
||||||
<view class="more-text"
|
|
||||||
v-if="getButtons(item.statusType).moreText.text || '更多' && getButtons(item.statusType).moreText.isShow"
|
|
||||||
:style="{ color: getButtons(item.statusType).moreText.color }">
|
|
||||||
{{ getButtons(item.statusType).moreText.text || '更多' }}
|
|
||||||
</view>
|
|
||||||
<view class="btn" :class="{ 'btn-primary': btn.primary }"
|
|
||||||
v-for="(btn, bIdx) in getButtons(item.statusType).buttons" :key="bIdx"
|
|
||||||
@tap.stop="handleAction(btn.action, item)">
|
|
||||||
{{ btn.text }}
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import { defineProps, defineEmits, ref, watch, nextTick, getCurrentInstance } from 'vue';
|
|
||||||
|
|
||||||
const props = defineProps({
|
|
||||||
list: {
|
|
||||||
type: Array,
|
|
||||||
default: () => []
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
const emit = defineEmits(['action', 'detail']);
|
|
||||||
|
|
||||||
|
|
||||||
const instance = getCurrentInstance();
|
|
||||||
const imgHeights = ref({});
|
|
||||||
|
|
||||||
const calculateHeights = () => {
|
|
||||||
nextTick(() => {
|
|
||||||
setTimeout(() => {
|
|
||||||
if (!instance || !instance.proxy) return;
|
|
||||||
const query = uni.createSelectorQuery().in(instance.proxy);
|
|
||||||
let keys = [];
|
|
||||||
|
|
||||||
if (!props.list || props.list.length === 0) return;
|
|
||||||
|
|
||||||
props.list.forEach((item, index) => {
|
|
||||||
if (!item.goodsList) return;
|
|
||||||
item.goodsList.forEach((goods, gIdx) => {
|
|
||||||
const key = index + '-' + gIdx;
|
|
||||||
keys.push(key);
|
|
||||||
query.select('#goods-info-' + key).boundingClientRect();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
if (keys.length > 0) {
|
|
||||||
query.exec((res) => {
|
|
||||||
if (res && res.length > 0) {
|
|
||||||
res.forEach((data, i) => {
|
|
||||||
if (data && data.height) {
|
|
||||||
imgHeights.value[keys[i]] = data.height;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}, 100); // 延迟等待视图完全渲染
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
watch(() => props.list, () => {
|
|
||||||
calculateHeights();
|
|
||||||
}, { deep: true, immediate: true });
|
|
||||||
|
|
||||||
// 状态文案映射
|
|
||||||
const getStatusText = (status) => {
|
|
||||||
const map = {
|
|
||||||
'wait_pay': '待付款',
|
|
||||||
'wait_send': '待发货',
|
|
||||||
'wait_recv': '卖家已发货',
|
|
||||||
'success': '交易成功',
|
|
||||||
'closed': '交易关闭',
|
|
||||||
'refunding': '退货'
|
|
||||||
};
|
|
||||||
return map[status] || status;
|
|
||||||
};
|
|
||||||
|
|
||||||
// 状态对应的按钮配置
|
|
||||||
const getButtons = (status) => {
|
|
||||||
const map = {
|
|
||||||
'wait_pay': {
|
|
||||||
moreText: {
|
|
||||||
text: "",
|
|
||||||
isShow: true,
|
|
||||||
color: "#1a1a1a"
|
|
||||||
},
|
|
||||||
buttons: [
|
|
||||||
{ text: '修改地址', action: 'edit_address' },
|
|
||||||
{ text: '找朋友付', action: 'cancel' },
|
|
||||||
{ text: '继续付款', action: 'pay', primary: true }
|
|
||||||
]
|
|
||||||
},
|
|
||||||
'wait_send': {
|
|
||||||
moreText: {
|
|
||||||
text: "",
|
|
||||||
isShow: false,
|
|
||||||
color: "#1a1a1a"
|
|
||||||
},
|
|
||||||
buttons: [
|
|
||||||
{ text: '催发货', action: 'remind' },
|
|
||||||
{ text: '查看物流', action: 'view_logistics' },
|
|
||||||
{ text: '修改地址', action: 'edit_address' }
|
|
||||||
]
|
|
||||||
},
|
|
||||||
'wait_recv': {
|
|
||||||
moreText: {
|
|
||||||
text: "",
|
|
||||||
isShow: true,
|
|
||||||
color: "#1a1a1a"
|
|
||||||
},
|
|
||||||
buttons: [
|
|
||||||
{ text: '加入购物车', action: 'add_cart' },
|
|
||||||
{ text: '查看物流', action: 'view_logistics' },
|
|
||||||
{ text: '确认收货', action: 'confirm', primary: true }
|
|
||||||
]
|
|
||||||
},
|
|
||||||
'success': {
|
|
||||||
moreText: {
|
|
||||||
text: "",
|
|
||||||
isShow: true,
|
|
||||||
color: "#1a1a1a"
|
|
||||||
},
|
|
||||||
buttons: [
|
|
||||||
{ text: '加入购物车', action: 'add_cart' },
|
|
||||||
{ text: '再买一单', action: 'buy_again' },
|
|
||||||
{ text: '评价', action: 'comment', primary: true }
|
|
||||||
]
|
|
||||||
},
|
|
||||||
'closed': {
|
|
||||||
moreText: {
|
|
||||||
text: "",
|
|
||||||
isShow: false,
|
|
||||||
color: "#1a1a1a"
|
|
||||||
},
|
|
||||||
buttons: [
|
|
||||||
{ text: '删除订单', action: 'delete' },
|
|
||||||
{ text: '加入购物车', action: 'add_cart' },
|
|
||||||
{ text: '再买一单', action: 'buy_again', primary: true }
|
|
||||||
]
|
|
||||||
},
|
|
||||||
'refunding': {
|
|
||||||
moreText: {
|
|
||||||
text: "",
|
|
||||||
isShow: true,
|
|
||||||
color: "#7C8495"
|
|
||||||
},
|
|
||||||
buttons: [
|
|
||||||
{ text: '加入购物车', action: 'add_cart' },
|
|
||||||
{ text: '钱款去向', action: 'query_money' },
|
|
||||||
{ text: '联系商家', action: 'contact_merchant', primary: true }
|
|
||||||
]
|
|
||||||
}
|
|
||||||
};
|
|
||||||
return map[status] || [];
|
|
||||||
};
|
|
||||||
|
|
||||||
const getTotalCount = (goodsList) => {
|
|
||||||
if (!goodsList || !goodsList.length) return 0;
|
|
||||||
return goodsList.reduce((sum, item) => sum + (Number(item.count) || 1), 0);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleAction = (action, item) => {
|
|
||||||
emit('action', { action, item });
|
|
||||||
};
|
|
||||||
|
|
||||||
const goToDetail = (item) => {
|
|
||||||
emit('detail', item);
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="less" scoped>
|
|
||||||
.card-wrapper {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-container {
|
|
||||||
margin: 16rpx 0;
|
|
||||||
background-color: #FFFFFF;
|
|
||||||
padding: 24rpx;
|
|
||||||
box-sizing: border-box;
|
|
||||||
|
|
||||||
.card-header {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: 24rpx;
|
|
||||||
|
|
||||||
.shop-info {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
.taobao-logo {
|
|
||||||
height: 28rpx;
|
|
||||||
margin-right: 6rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.shop-name {
|
|
||||||
font-size: 28rpx;
|
|
||||||
color: #333333;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
.arrow-icon {
|
|
||||||
font-size: 24rpx;
|
|
||||||
color: #999;
|
|
||||||
margin-left: 8rpx;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.order-status {
|
|
||||||
font-size: 26rpx;
|
|
||||||
color: #FF7824;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.goods-list {
|
|
||||||
.goods-item {
|
|
||||||
display: flex;
|
|
||||||
align-items: flex-start;
|
|
||||||
margin-bottom: 18rpx;
|
|
||||||
|
|
||||||
.goods-img {
|
|
||||||
min-width: 178rpx;
|
|
||||||
min-height: 178rpx;
|
|
||||||
border-radius: 12rpx;
|
|
||||||
background-color: #F5F5F5;
|
|
||||||
flex-shrink: 0;
|
|
||||||
|
|
||||||
&.refunding {
|
|
||||||
min-width: 142rpx;
|
|
||||||
min-height: 142rpx;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.goods-info {
|
|
||||||
flex: 1;
|
|
||||||
margin-left: 24rpx;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
|
|
||||||
.goods-title-row {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
|
|
||||||
|
|
||||||
.good-info-box {
|
|
||||||
flex: 1;
|
|
||||||
width: 100px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.goods-title {
|
|
||||||
font-size: 26rpx;
|
|
||||||
color: #00032A;
|
|
||||||
line-height: 36rpx;
|
|
||||||
display: -webkit-box;
|
|
||||||
-webkit-box-orient: vertical;
|
|
||||||
-webkit-line-clamp: 1;
|
|
||||||
overflow: hidden;
|
|
||||||
flex: 1;
|
|
||||||
margin-right: 18rpx;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
|
|
||||||
.goods-price-box {
|
|
||||||
text-align: right;
|
|
||||||
|
|
||||||
|
|
||||||
.price-symbol {
|
|
||||||
font-size: 30rpx;
|
|
||||||
color: #1A1A1A;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
|
|
||||||
.price-val {
|
|
||||||
font-size: 30rpx;
|
|
||||||
color: #1A1A1A;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
|
|
||||||
.goods-count {
|
|
||||||
display: block;
|
|
||||||
font-size: 22rpx;
|
|
||||||
line-height: 22rpx;
|
|
||||||
color: #999999;
|
|
||||||
margin-top: 14rpx;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.goods-spec {
|
|
||||||
font-size: 22rpx;
|
|
||||||
line-height: 22rpx;
|
|
||||||
color: #7C8495;
|
|
||||||
border-radius: 8rpx;
|
|
||||||
align-self: flex-start;
|
|
||||||
margin-top: 22rpx;
|
|
||||||
white-space: nowrap;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
overflow: hidden;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.goods-tags {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
margin-top: 16rpx;
|
|
||||||
|
|
||||||
.tag {
|
|
||||||
font-size: 24rpx;
|
|
||||||
line-height: 24rpx;
|
|
||||||
color: #35A156;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.goods-refund-status {
|
|
||||||
font-size: 24rpx;
|
|
||||||
color: #FF5000;
|
|
||||||
margin-top: 12rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.goods-evaluation {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
background-color: #F4F5F7;
|
|
||||||
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
|
||||||
height: 46rpx;
|
|
||||||
padding: 0 12rpx;
|
|
||||||
margin-top: 20rpx;
|
|
||||||
|
|
||||||
.left {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
text {
|
|
||||||
width: 176rpx;
|
|
||||||
white-space: nowrap;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.right {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
text {
|
|
||||||
color: #CACFD4;
|
|
||||||
font-size: 20rpx;
|
|
||||||
margin-right: 8rpx;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
text {
|
|
||||||
font-size: 24rpx;
|
|
||||||
color: #1A1A1A;
|
|
||||||
font-weight: 500;
|
|
||||||
line-height: 24rpx;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.tips-box {
|
|
||||||
background-color: #F4F5F7;
|
|
||||||
border-radius: 12rpx;
|
|
||||||
padding: 20rpx 24rpx;
|
|
||||||
margin-top: 16rpx;
|
|
||||||
height: 68rpx;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
.title {
|
|
||||||
color: #1A1A1A;
|
|
||||||
margin-left: 8rpx;
|
|
||||||
margin-right: 20rpx;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tip-icon {
|
|
||||||
width: 30rpx;
|
|
||||||
height: 30rpx;
|
|
||||||
margin-right: 12rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.text {
|
|
||||||
font-size: 26rpx;
|
|
||||||
color: #7C8495;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.daifukuan {
|
|
||||||
.tip-icon {
|
|
||||||
width: 30rpx;
|
|
||||||
height: 30rpx;
|
|
||||||
margin-right: 12rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.text {
|
|
||||||
font-size: 26rpx;
|
|
||||||
color: #F37120;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.daifahuo {}
|
|
||||||
}
|
|
||||||
|
|
||||||
.order-total {
|
|
||||||
display: flex;
|
|
||||||
justify-content: flex-end;
|
|
||||||
align-items: center;
|
|
||||||
margin-top: 10rpx;
|
|
||||||
margin-bottom: 24rpx;
|
|
||||||
|
|
||||||
.total-label {
|
|
||||||
font-size: 24rpx;
|
|
||||||
color: #1A1A1A;
|
|
||||||
margin-right: 8rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.total-symbol {
|
|
||||||
font-size: 28rpx;
|
|
||||||
color: #1A1A1A;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
|
|
||||||
.total-price {
|
|
||||||
font-size: 32rpx;
|
|
||||||
color: #1A1A1A;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-footer {
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
justify-content: flex-end;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
.more-text {
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
top: 50%;
|
|
||||||
font-size: 26rpx;
|
|
||||||
line-height: 26rpx;
|
|
||||||
color: #1A1A1A;
|
|
||||||
transform: translateY(-50%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn {
|
|
||||||
padding: 0 24rpx;
|
|
||||||
height: 64rpx;
|
|
||||||
line-height: 64rpx;
|
|
||||||
font-size: 26rpx;
|
|
||||||
color: #1A1A1A;
|
|
||||||
margin-left: 16rpx;
|
|
||||||
background-color: #F4F5F7;
|
|
||||||
border-radius: 12rpx;
|
|
||||||
|
|
||||||
&.btn-primary {
|
|
||||||
color: #F37120;
|
|
||||||
background-color: #FFECE5;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<style>
|
|
||||||
@import '@/common/main.css';
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,63 +0,0 @@
|
||||||
{
|
|
||||||
//购物类型
|
|
||||||
"shoppingType": [
|
|
||||||
{
|
|
||||||
"label": "待付款",
|
|
||||||
"key": "daifukuan"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"label": "待发货",
|
|
||||||
"key": "daifahuo"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"label": "待收货",
|
|
||||||
"key": "daishouhuo"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"label": "退款/售后",
|
|
||||||
"key": "tuikuanshouhou"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"label": "评价",
|
|
||||||
"key": "pingjia"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"label": "已取消",
|
|
||||||
"key": "yiquxiao"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
//购物类型字段分类
|
|
||||||
"shoppingClassfiy": {
|
|
||||||
"daifukuan": {
|
|
||||||
"status": "待付款",
|
|
||||||
"statusDesc": "卖家未发货",
|
|
||||||
"shopName": "细条条",
|
|
||||||
"shopType": "taobao", //淘宝-taobao，天猫-tianmao，百补-baiyibutie
|
|
||||||
"totalPrice": "",
|
|
||||||
"carriage": "0.00",
|
|
||||||
"products": [
|
|
||||||
{
|
|
||||||
"image": "",
|
|
||||||
"title": "",
|
|
||||||
"desc": "",
|
|
||||||
"service": "",
|
|
||||||
"price": "",
|
|
||||||
"count": "",
|
|
||||||
"stuta": {
|
|
||||||
"value": "买家已付款", //待付款-买家已付款，待发货-卖家已发货，待收货-交易完成,退款
|
|
||||||
"key": "daifukuan",
|
|
||||||
"desc": "申请退款"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"orderInfo": [
|
|
||||||
{
|
|
||||||
"label": "订单编号",
|
|
||||||
"key": "orderNumber",
|
|
||||||
"value": "",
|
|
||||||
"type": "number"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,610 +1,18 @@
|
||||||
<template>
|
<template>
|
||||||
<view class="page-container flex-column">
|
<view class="container">
|
||||||
<view class="top-fixed">
|
<view v-for="item in mockOrderList" :key="item.id">
|
||||||
<nav-bar v-if="!selectedImage" title="淘宝" bgColor="#ffffff" :buttonGroup="buttonGroup"
|
{{ item.name }}
|
||||||
@button-click="util.clickTitlePopupButton" tipLayerType="jingdong-shopping-list" isTipLayer
|
|
||||||
tipLayerText="添加订单信息">
|
|
||||||
<template v-slot:left>
|
|
||||||
<image class="back-icon" src="/static/image/shopping/taobao/back.png" mode="aspectFit"></image>
|
|
||||||
</template>
|
|
||||||
<template v-slot:center>
|
|
||||||
<view class="search-box flex-align-center">
|
|
||||||
<image class="search-icon" src="/static/image/shopping/jingdong/search-icon.png"
|
|
||||||
mode="aspectFit">
|
|
||||||
</image>
|
|
||||||
<input class="input" type="text" placeholder="搜索我的订单" />
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
<template v-slot:right>
|
|
||||||
<view class="right-box flex-align-center">
|
|
||||||
<view class="item flex-column flex-align-center">
|
|
||||||
<image class="icon" src="/static/image/shopping/taobao/shaixuan.png"></image>
|
|
||||||
<text class="text">筛选</text>
|
|
||||||
</view>
|
|
||||||
<view class="item flex-column flex-align-center">
|
|
||||||
<image class="icon" src="/static/image/shopping/taobao/guanli.png"></image>
|
|
||||||
<text class="text">管理</text>
|
|
||||||
</view>
|
|
||||||
<view class="item flex-column flex-align-center">
|
|
||||||
<image class="icon" src="/static/image/shopping/taobao/xiaoxi.png"></image>
|
|
||||||
<text class="text" style="opacity: 0;">消息</text>
|
|
||||||
</view>
|
|
||||||
</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)">
|
|
||||||
<view class="title">
|
|
||||||
<text>{{ item.name }}</text>
|
|
||||||
<view class="line" v-if="currentTab === index"></view>
|
|
||||||
</view>
|
|
||||||
<!-- <view class="line" v-if="currentTab === index"></view> -->
|
|
||||||
<image v-if="item.icon" class="badge-icon" :class="{ 'android-m-top': $system == 'Android' }"
|
|
||||||
:src="item.icon" mode="heightFix"></image>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<view class="filter-wrapper">
|
|
||||||
<view class="position-l">
|
|
||||||
<view class="filter-item" :class="{ active: currentFilter === 0 }" @click="switchFilter(0)">
|
|
||||||
<text class="text">全部</text>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<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, disabled: item.disabled }"
|
|
||||||
@click="switchFilter(index)">
|
|
||||||
<text class="text">{{ item.name }}</text>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</scroll-view>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
</view>
|
</view>
|
||||||
<scroll-view class="flex-1" style="height: 100px;" scroll-y="true">
|
|
||||||
<view v-if="currentTab === 0 && currentFilter === 0"
|
|
||||||
class="shangou-tips flex-align-center flex-justify-between">
|
|
||||||
<view class="left flex-align-center">
|
|
||||||
<image style="width: 64rpx;height: 28rpx;margin-right: 8rpx;"
|
|
||||||
src="/static/image/shopping/taobao/shangou-logo.png"></image>
|
|
||||||
<text>暂无进行中订单</text>
|
|
||||||
</view>
|
|
||||||
<view class="right">
|
|
||||||
<text>查看全部</text>
|
|
||||||
<uni-icons type="right" size="14" color="#5E6367"></uni-icons>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<listCard :list="displayList" />
|
|
||||||
</scroll-view>
|
|
||||||
|
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
|
|
||||||
<!-- 水印 -->
|
|
||||||
<!-- <view v-if="$isVip()">
|
|
||||||
<watermark dark="light" source="uni_alipay_shopping_taobao" />
|
|
||||||
<liu-drag-button :canDocking="false" @clickBtn="$goRechargePage('watermark', 'uni_alipay_shopping_taobao')">
|
|
||||||
<c-lottie ref="cLottieRef" :src='$watermark()' width="94px" height='74px' :loop="true"></c-lottie>
|
|
||||||
</liu-drag-button>
|
|
||||||
</view> -->
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, computed, onMounted, getCurrentInstance } from 'vue';
|
import { ref } from 'vue';
|
||||||
import { onShow } from '@dcloudio/uni-app';
|
|
||||||
import { util } from '@/utils/common.js';
|
|
||||||
import listCard from './components/list-card/list-card.vue';
|
|
||||||
|
|
||||||
const mockList = ref([
|
|
||||||
{
|
|
||||||
orderType: "shopping",
|
|
||||||
shopName: '淘宝心选官方旗舰店',
|
|
||||||
statusType: 'wait_pay',
|
|
||||||
shopType: 'taobao',
|
|
||||||
statusDesc: '',
|
|
||||||
goodsList: [
|
|
||||||
{
|
|
||||||
image: '',
|
|
||||||
title: '【官方正品】全棉时代纯棉柔巾洗脸巾抽纸加厚擦脸巾100抽*6包',
|
|
||||||
specs: '颜色分类: 100抽*6包',
|
|
||||||
price: '69.00',
|
|
||||||
count: 1,
|
|
||||||
tags: ['七天无理由退换']
|
|
||||||
}
|
|
||||||
],
|
|
||||||
totalPrice: '69.00'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
orderType: "shopping",
|
|
||||||
shopName: '小米官方旗舰店',
|
|
||||||
statusType: 'wait_send',
|
|
||||||
statusDesc: '预计明天送达',
|
|
||||||
shopType: 'taobao',
|
|
||||||
goodsList: [
|
|
||||||
{
|
|
||||||
image: '',
|
|
||||||
title: 'Xiaomi/小米 14 徕卡光学镜头 骁龙8Gen3 澎湃OS 小米手机',
|
|
||||||
specs: '颜色分类: 黑色; 内存容量: 16GB+512GB',
|
|
||||||
price: '4599.00',
|
|
||||||
count: 1,
|
|
||||||
tags: ['正品保障', '顺丰包邮']
|
|
||||||
}
|
|
||||||
],
|
|
||||||
totalPrice: '4599.00'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
orderType: "shopping",
|
|
||||||
shopName: 'NIKE官方旗舰店',
|
|
||||||
statusType: 'wait_recv',
|
|
||||||
statusDesc: '您已在重庆九龙坡区哈哈哈完成取件，...',
|
|
||||||
isSignFor: true,
|
|
||||||
shopType: 'taobao',
|
|
||||||
goodsList: [
|
|
||||||
{
|
|
||||||
image: '',
|
|
||||||
title: 'Nike耐克官方AIR FORCE 1 07空军一号男鞋板鞋运动鞋CW2288',
|
|
||||||
specs: '颜色分类: 纯白; 尺码: 42.5',
|
|
||||||
price: '749.00',
|
|
||||||
count: 1,
|
|
||||||
tags: ['假一赔四']
|
|
||||||
}
|
|
||||||
],
|
|
||||||
totalPrice: '749.00'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
orderType: "shopping",
|
|
||||||
shopName: 'NIKE官方旗舰店',
|
|
||||||
statusType: 'wait_recv',
|
|
||||||
isSignFor: false,
|
|
||||||
statusDesc: "平台支持退货",
|
|
||||||
shopType: 'taobao',
|
|
||||||
goodsList: [
|
|
||||||
{
|
|
||||||
image: '',
|
|
||||||
title: 'Nike耐克官方AIR FORCE 1 07空军一号男鞋板鞋运动鞋CW2288',
|
|
||||||
specs: '颜色分类: 纯白; 尺码: 42.5',
|
|
||||||
price: '749.00',
|
|
||||||
count: 1,
|
|
||||||
tags: ['假一赔四']
|
|
||||||
}
|
|
||||||
],
|
|
||||||
totalPrice: '749.00'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
orderType: "shopping",
|
|
||||||
shopName: '三只松鼠旗舰店',
|
|
||||||
statusType: 'success',
|
|
||||||
shopType: 'taobao',
|
|
||||||
goodsList: [
|
|
||||||
{
|
|
||||||
image: '',
|
|
||||||
title: '三只松鼠 坚果大礼包 每日坚果 送礼佳品 1498g',
|
|
||||||
specs: '颜色分类: 坚果礼盒1498g',
|
|
||||||
price: '128.00',
|
|
||||||
count: 2,
|
|
||||||
tags: ['过敏包退']
|
|
||||||
}
|
|
||||||
],
|
|
||||||
totalPrice: '256.00'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
orderType: "shopping",
|
|
||||||
shopName: 'Apple Store 官方旗舰店',
|
|
||||||
statusType: 'closed',
|
|
||||||
shopType: 'tianmao',
|
|
||||||
goodsList: [
|
|
||||||
{
|
|
||||||
image: '',
|
|
||||||
title: 'Apple iPhone 15 Pro (A3104) 256GB 原色钛金属 5G手机',
|
|
||||||
specs: '颜色分类: 原色钛金属; 内存容量: 256GB',
|
|
||||||
price: '8999.00',
|
|
||||||
count: 1,
|
|
||||||
tags: []
|
|
||||||
}
|
|
||||||
],
|
|
||||||
totalPrice: '8999.00'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
orderType: "shopping",
|
|
||||||
shopName: '优衣库官方旗舰店',
|
|
||||||
statusType: 'refunding',
|
|
||||||
statusDesc: '平台支持退款',
|
|
||||||
shopType: 'taobao',
|
|
||||||
goodsList: [
|
|
||||||
{
|
|
||||||
image: '',
|
|
||||||
title: 'UNIQLO 优衣库 男装/女装 摇粒绒拉链运动开衫(长袖) 463351',
|
|
||||||
specs: '颜色分类: 藏青色; 尺码: L',
|
|
||||||
price: '199.00',
|
|
||||||
count: 1,
|
|
||||||
tags: ['极速退款'],
|
|
||||||
refundStatus: '退款成功'
|
|
||||||
}
|
|
||||||
],
|
|
||||||
totalPrice: '199.00'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
orderType: "waimai",
|
|
||||||
shopName: '美团外卖-麦当劳',
|
|
||||||
statusType: 'success',
|
|
||||||
statusDesc: '订单已完成',
|
|
||||||
shopType: 'taobao',
|
|
||||||
goodsList: [
|
|
||||||
{
|
|
||||||
image: '',
|
|
||||||
title: '麦辣鸡腿堡套餐',
|
|
||||||
specs: '默认',
|
|
||||||
price: '32.00',
|
|
||||||
count: 1,
|
|
||||||
tags: []
|
|
||||||
}
|
|
||||||
],
|
|
||||||
totalPrice: '32.00'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
orderType: "waimai",
|
|
||||||
shopName: '饿了么-星巴克',
|
|
||||||
statusType: 'wait_send',
|
|
||||||
statusDesc: '商家准备中',
|
|
||||||
shopType: 'taobao',
|
|
||||||
goodsList: [
|
|
||||||
{
|
|
||||||
image: '',
|
|
||||||
title: '拿铁咖啡',
|
|
||||||
specs: '大杯 / 热',
|
|
||||||
price: '28.00',
|
|
||||||
count: 1,
|
|
||||||
tags: []
|
|
||||||
}
|
|
||||||
],
|
|
||||||
totalPrice: '28.00'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
orderType: "waimai",
|
|
||||||
shopName: '淘鲜达-盒马鲜生',
|
|
||||||
statusType: 'success',
|
|
||||||
statusDesc: '订单已完成',
|
|
||||||
shopType: 'taobao',
|
|
||||||
goodsList: [
|
|
||||||
{
|
|
||||||
image: '',
|
|
||||||
title: '进口智利车厘子 500g',
|
|
||||||
specs: 'JJ级',
|
|
||||||
price: '59.00',
|
|
||||||
count: 1,
|
|
||||||
tags: ['一小时送达']
|
|
||||||
}
|
|
||||||
],
|
|
||||||
totalPrice: '59.00'
|
|
||||||
}
|
|
||||||
]);
|
|
||||||
|
|
||||||
const displayList = computed(() => {
|
|
||||||
let list = mockList.value;
|
|
||||||
|
|
||||||
// 1. 一级 Tab 过滤 (orderType)
|
|
||||||
if (currentTab.value === 1) { // 购物
|
|
||||||
list = list.filter(item => item.orderType === 'shopping');
|
|
||||||
} else if (currentTab.value === 2) { // 闪购
|
|
||||||
list = list.filter(item => item.orderType === 'waimai');
|
|
||||||
}
|
|
||||||
|
|
||||||
// 2. 二级分类过滤 (currentFilter)
|
|
||||||
if (currentFilter.value > 0) {
|
|
||||||
const filterName = filterList.value[currentFilter.value]?.name;
|
|
||||||
|
|
||||||
// 统一定义状态映射
|
|
||||||
const statusMap = {
|
|
||||||
'待付款': ['wait_pay'],
|
|
||||||
'待发货': ['wait_send'],
|
|
||||||
'待收货': ['wait_recv'],
|
|
||||||
'退款/售后': ['refunding'],
|
|
||||||
'已关闭': ['closed'],
|
|
||||||
'待评价': ['success'] // 闪购下 success 状态代表已送达可评价
|
|
||||||
};
|
|
||||||
|
|
||||||
const targetStatus = statusMap[filterName];
|
|
||||||
if (targetStatus) {
|
|
||||||
list = list.filter(item => targetStatus.includes(item.statusType));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return list;
|
|
||||||
});
|
|
||||||
|
|
||||||
const currentFilter = ref(0);
|
|
||||||
const filterList = ref([
|
|
||||||
{ name: '全部' },
|
|
||||||
{ name: '待付款' },
|
|
||||||
{ name: '待发货' },
|
|
||||||
{ name: '待收货' },
|
|
||||||
{ name: '退款/售后' },
|
|
||||||
{ name: '已关闭' }
|
|
||||||
]);
|
|
||||||
|
|
||||||
const currentTab = ref(0);
|
|
||||||
const tabList = ref([
|
|
||||||
{ name: '全部订单' },
|
|
||||||
{ name: '购物' },
|
|
||||||
{ name: '闪购', icon: '/static/image/shopping/taobao/waimai.png' },
|
|
||||||
{ name: '飞猪', icon: '/static/image/shopping/taobao/lvxing.png', disabled: true }
|
|
||||||
]);
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 切换tab
|
* 模拟订单列表
|
||||||
* @param index
|
|
||||||
*/
|
*/
|
||||||
const switchTab = (index) => {
|
const mockOrderList = ref([]);
|
||||||
if (tabList.value[index].disabled) return;
|
|
||||||
currentTab.value = index;
|
|
||||||
// 重置筛选为“全部”
|
|
||||||
currentFilter.value = 0;
|
|
||||||
// 动态更新筛选项
|
|
||||||
updateFilterList();
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 动态更新筛选项
|
|
||||||
*/
|
|
||||||
const updateFilterList = () => {
|
|
||||||
let sourceList = [];
|
|
||||||
// 根据tab切换不同的筛选项数据
|
|
||||||
switch (currentTab.value) {
|
|
||||||
case 0:
|
|
||||||
sourceList = ["全部", "待付款", "待发货", "待收货", "退款/售后", "已关闭"];
|
|
||||||
break;
|
|
||||||
case 1:
|
|
||||||
sourceList = ["全部", "待付款", "待发货", "待收货", "退款/售后", "已关闭"];
|
|
||||||
break;
|
|
||||||
case 2:
|
|
||||||
sourceList = ["全部", "待付款", "待发货", "待收货", "待评价", "已关闭"];
|
|
||||||
break;
|
|
||||||
case 3:
|
|
||||||
sourceList = ["全部", "全部行程", "已完成", "退款/售后"];
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
filterList.value = sourceList.map((name, index) => ({
|
|
||||||
name,
|
|
||||||
disabled: index === 2 && currentTab.value === 1 // 示例：只有待发货可以被禁用
|
|
||||||
}));
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 切换筛选
|
|
||||||
* @param index 索引
|
|
||||||
*/
|
|
||||||
const switchFilter = (index) => {
|
|
||||||
if (filterList.value[index].disabled) return;
|
|
||||||
if (currentFilter.value === index) {
|
|
||||||
currentFilter.value = 0;
|
|
||||||
} else {
|
|
||||||
currentFilter.value = index;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="less" scoped>
|
<style lang="less"></style>
|
||||||
.page-container {
|
|
||||||
height: 100vh;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.top-fixed {
|
|
||||||
background-color: #ffffff;
|
|
||||||
|
|
||||||
::v-deep .uni-navbar__header-btns {
|
|
||||||
width: auto !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
::v-deep .uni-navbar__header-container {
|
|
||||||
padding: 0 14rpx;
|
|
||||||
padding-left: 34rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.back-icon {
|
|
||||||
width: 40rpx;
|
|
||||||
height: 40rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-box {
|
|
||||||
background-color: #F1F5F8;
|
|
||||||
padding: 0 18rpx;
|
|
||||||
width: 100%;
|
|
||||||
border-radius: 16rpx;
|
|
||||||
|
|
||||||
.search-icon {
|
|
||||||
width: 26rpx;
|
|
||||||
height: 26rpx;
|
|
||||||
margin-right: 10rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.input {
|
|
||||||
width: 100%;
|
|
||||||
height: 72rpx;
|
|
||||||
font-size: 26rpx;
|
|
||||||
|
|
||||||
::v-deep .input-placeholder {
|
|
||||||
color: #7E8C9D;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.right-box {
|
|
||||||
.item {
|
|
||||||
margin: 0 14rpx;
|
|
||||||
|
|
||||||
.icon {
|
|
||||||
width: 40rpx;
|
|
||||||
height: 40rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.text {
|
|
||||||
font-size: 20rpx;
|
|
||||||
color: #1A1A1A;
|
|
||||||
line-height: 20rpx;
|
|
||||||
margin-top: 4rpx;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.tab-list {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
padding: 16rpx 36rpx 10rpx;
|
|
||||||
|
|
||||||
.tab-item {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
margin-right: 58rpx;
|
|
||||||
|
|
||||||
.title {
|
|
||||||
position: relative;
|
|
||||||
font-size: 30rpx;
|
|
||||||
color: #00032A;
|
|
||||||
font-weight: 500;
|
|
||||||
line-height: 16px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.active {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
.title {
|
|
||||||
color: #EF7518;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.line {
|
|
||||||
position: absolute;
|
|
||||||
bottom: -12rpx;
|
|
||||||
left: 50%;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
width: 22rpx;
|
|
||||||
height: 4rpx;
|
|
||||||
background-color: #EF7518;
|
|
||||||
border-radius: 4rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.badge-icon {
|
|
||||||
margin-left: 6rpx;
|
|
||||||
width: 52rpx;
|
|
||||||
height: 14px;
|
|
||||||
|
|
||||||
&.android-m-top {
|
|
||||||
margin-top: -3rpx;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-wrapper {
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
padding: 0 22rpx 0 30rpx;
|
|
||||||
margin-top: 28rpx;
|
|
||||||
padding-bottom: 16rpx;
|
|
||||||
|
|
||||||
.filter-scroll {
|
|
||||||
flex: 1;
|
|
||||||
width: 0;
|
|
||||||
white-space: nowrap;
|
|
||||||
|
|
||||||
.filter-list {
|
|
||||||
padding-right: 24rpx;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.position-l {
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
padding-left: 30rpx;
|
|
||||||
background-color: #ffffff;
|
|
||||||
z-index: 1;
|
|
||||||
|
|
||||||
.filter-item {
|
|
||||||
margin-right: 10rpx;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-item {
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
vertical-align: middle;
|
|
||||||
height: 56rpx;
|
|
||||||
padding: 0 22rpx;
|
|
||||||
background-color: #F1F4F9;
|
|
||||||
border-radius: 12rpx;
|
|
||||||
margin-right: 16rpx;
|
|
||||||
border: 2rpx solid transparent;
|
|
||||||
box-sizing: border-box;
|
|
||||||
|
|
||||||
.text {
|
|
||||||
font-size: 26rpx;
|
|
||||||
line-height: 26rpx;
|
|
||||||
color: #00032A;
|
|
||||||
}
|
|
||||||
|
|
||||||
.close-icon {
|
|
||||||
font-size: 18px;
|
|
||||||
color: #E40C24;
|
|
||||||
margin-top: -4rpx;
|
|
||||||
line-height: 14px;
|
|
||||||
margin-left: 6rpx;
|
|
||||||
font-weight: 400;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.active {
|
|
||||||
background-color: #FFEEE6;
|
|
||||||
|
|
||||||
.text {
|
|
||||||
color: #EF7518;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// &.disabled {
|
|
||||||
// background-color: #F8F8F8;
|
|
||||||
// border-color: transparent;
|
|
||||||
|
|
||||||
// .text {
|
|
||||||
// color: #CCCCCC;
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.shangou-tips {
|
|
||||||
padding: 28rpx 22rpx 36rpx 32rpx;
|
|
||||||
background-color: #ffffff;
|
|
||||||
|
|
||||||
.left {
|
|
||||||
height: 28rpx;
|
|
||||||
|
|
||||||
text {
|
|
||||||
font-size: 26rpx;
|
|
||||||
line-height: 28rpx;
|
|
||||||
color: #00032A;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.right {
|
|
||||||
color: #5E6367;
|
|
||||||
font-size: 26rpx;
|
|
||||||
line-height: 28rpx;
|
|
||||||
|
|
||||||
text {
|
|
||||||
margin-right: 10rpx;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<style>
|
|
||||||
@import '@/common/main.css';
|
|
||||||
</style>
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 822 B |
Binary file not shown.
|
Before Width: | Height: | Size: 894 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 800 B |
Binary file not shown.
|
Before Width: | Height: | Size: 2.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 940 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.3 KiB |
Loading…
Reference in New Issue