484 lines
13 KiB
Plaintext
484 lines
13 KiB
Plaintext
<template>
|
||
<view class="order-list-page">
|
||
<!-- 绛涢€夊尯鍩?-->
|
||
<view class="filter-card">
|
||
<view class="filter-row">
|
||
<view class="filter-item">
|
||
<text class="label">璁㈠崟绫诲瀷锛?/text>
|
||
<view class="mock-select">
|
||
<text>鍏ㄩ儴璁㈠崟</text>
|
||
<view class="arrow-down"></view>
|
||
</view>
|
||
</view>
|
||
<view class="filter-item">
|
||
<text class="label">鏀粯鏂瑰紡锛?/text>
|
||
<view class="mock-select">
|
||
<text>鍏ㄩ儴</text>
|
||
<view class="arrow-down"></view>
|
||
</view>
|
||
</view>
|
||
<view class="filter-item long">
|
||
<text class="label">鍒涘缓鏃堕棿锛?/text>
|
||
<view class="mock-date-range">
|
||
<image class="cal-icon" src="/static/icons/calendar.png" mode="aspectFit" />
|
||
<text class="placeholder">寮€濮嬫棩鏈? - 缁撴潫鏃ユ湡</text>
|
||
</view>
|
||
</view>
|
||
<view class="filter-item search">
|
||
<text class="label">璁㈠崟鎼滅储锛?/text>
|
||
<view class="search-group">
|
||
<view class="search-select">
|
||
<text>鍏ㄩ儴</text>
|
||
<view class="arrow-down"></view>
|
||
</view>
|
||
<input class="search-input" placeholder="璇疯緭鍏? />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="btn-row">
|
||
<button class="btn btn-primary">鏌ヨ</button>
|
||
<button class="btn btn-default">閲嶇疆</button>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 鍒楄〃鏁版嵁鍖哄煙 -->
|
||
<view class="content-card">
|
||
<!-- 鐘舵€?Tabs -->
|
||
<view class="status-tabs">
|
||
<view
|
||
v-for="(tab, index) in statusTabs"
|
||
:key="index"
|
||
class="tab-item"
|
||
:class="{ active: activeTab === index }"
|
||
@click="activeTab = index"
|
||
>
|
||
<text class="tab-text">{{ tab.name }}</text>
|
||
<text v-if="tab.count" class="tab-count">({{ tab.count }})</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 鎿嶄綔鎸夐挳 -->
|
||
<view class="action-bar">
|
||
<button class="action-btn btn-blue">璁㈠崟鏍搁攢</button>
|
||
<button class="action-btn btn-outline">鎵归噺鍙戣揣</button>
|
||
<button class="action-btn btn-outline">鎵归噺鍒犻櫎</button>
|
||
<button class="action-btn btn-outline">璁㈠崟瀵煎嚭</button>
|
||
</view>
|
||
|
||
<!-- 鏁版嵁琛ㄦ牸 -->
|
||
<view class="order-table">
|
||
<view class="thead">
|
||
<view class="th col-check">
|
||
<checkbox :checked="false" color="#1890ff" />
|
||
</view>
|
||
<view class="th col-order">璁㈠崟鍙?| 绫诲瀷</view>
|
||
<view class="th col-product">鍟嗗搧淇℃伅</view>
|
||
<view class="th col-user">鐢ㄦ埛淇℃伅</view>
|
||
<view class="th col-price">瀹為檯鏀粯</view>
|
||
<view class="th col-pay">鏀粯鏂瑰紡</view>
|
||
<view class="th col-time">鏀粯鏃堕棿</view>
|
||
<view class="th col-status">璁㈠崟鐘舵€?/view>
|
||
<view class="th col-op">鎿嶄綔</view>
|
||
</view>
|
||
|
||
<view class="tbody">
|
||
<view v-for="(item, index) in orderData" :key="index" class="tr">
|
||
<view class="td col-check">
|
||
<checkbox :checked="false" color="#1890ff" />
|
||
</view>
|
||
<!-- 璁㈠崟鍙穦绫诲瀷 -->
|
||
<view class="td col-order">
|
||
<text class="order-sn">{{ item.sn }}</text>
|
||
<text class="order-type" :class="item.typeColor">[{{ item.typeName }}]</text>
|
||
<text v-if="item.cancelStatus" class="cancel-text">{{ item.cancelStatus }}</text>
|
||
</view>
|
||
<!-- 鍟嗗搧淇℃伅 -->
|
||
<view class="td col-product">
|
||
<view class="product-info-wrap">
|
||
<image class="p-img" :src="item.product.img" mode="aspectFill" />
|
||
<text class="p-name">{{ item.product.name }}</text>
|
||
</view>
|
||
</view>
|
||
<!-- 鐢ㄦ埛淇℃伅 -->
|
||
<view class="td col-user">
|
||
<text class="u-info">{{ item.user.phone }} | {{ item.user.id }}</text>
|
||
</view>
|
||
<!-- 瀹為檯鏀粯 -->
|
||
<view class="td col-price">
|
||
<text class="price-val">{{ item.actualPrice }}</text>
|
||
</view>
|
||
<!-- 鏀粯鏂瑰紡 -->
|
||
<view class="td col-pay">
|
||
<text class="pay-text">{{ item.payMethod }}</text>
|
||
</view>
|
||
<!-- 鏀粯鏃堕棿 -->
|
||
<view class="td col-time">
|
||
<text class="time-text">{{ item.payTime }}</text>
|
||
</view>
|
||
<!-- 璁㈠崟鐘舵€?-->
|
||
<view class="td col-status">
|
||
<text class="status-text">{{ item.statusName }}</text>
|
||
</view>
|
||
<!-- 鎿嶄綔 -->
|
||
<view class="td col-op">
|
||
<view class="op-links">
|
||
<text class="op-link primary" v-if="item.primaryAction">{{ item.primaryAction }}</text>
|
||
<view class="op-link-more">
|
||
<text class="more-text">鏇村</text>
|
||
<view class="arrow-down-blue"></view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup lang="uts">
|
||
import { ref } from 'vue'
|
||
|
||
const activeTab = ref(2) // 榛樿閫変腑寰呭彂璐ф垨寰呮牳閿€锛堟墜鍔ㄥ榻愭埅鍥撅級
|
||
|
||
const statusTabs = [
|
||
{ name: '鍏ㄩ儴', count: null },
|
||
{ name: '寰呮敮浠?, count: 793 },
|
||
{ name: '寰呭彂璐?, count: 3695 },
|
||
{ name: '寰呮牳閿€', count: null },
|
||
{ name: '寰呮敹璐?, count: null },
|
||
{ name: '寰呰瘎浠?, count: null },
|
||
{ name: '宸插畬鎴?, count: null },
|
||
{ name: '宸查€€娆?, count: null },
|
||
{ name: '宸插垹闄?, count: null }
|
||
]
|
||
|
||
const orderData = ref([
|
||
{
|
||
sn: 'cp541336970228400128',
|
||
typeName: '绉掓潃璁㈠崟',
|
||
typeColor: 'blue',
|
||
cancelStatus: '鐢ㄦ埛宸插彇娑?,
|
||
product: {
|
||
img: '/static/logo.png',
|
||
name: '鐖卞鑹烘櫤鑳?濂囬亣LT01 鎶曞奖浠?瀹剁敤鍗у 瓒呴珮娓呮墜鏈轰究鎼烘姇褰辨満 (4K瓒呮竻 鏀寔...'
|
||
},
|
||
user: { phone: '188****4074', id: '82694' },
|
||
actualPrice: '鏈敮浠?,
|
||
payMethod: '--',
|
||
payTime: '--',
|
||
statusName: '鏈敮浠?,
|
||
primaryAction: ''
|
||
},
|
||
{
|
||
sn: 'cp541289248708362240',
|
||
typeName: '鏍搁攢璁㈠崟',
|
||
typeColor: 'purple',
|
||
cancelStatus: '',
|
||
product: {
|
||
img: '/static/logo.png',
|
||
name: '闃胯开杈炬柉瀹樼綉 adidas BBALL CAP COT 鐢峰コ璁粌杩愬姩甯藉瓙FQ5270 浼犲澧ㄦ按...'
|
||
},
|
||
user: { phone: '浣犲氨缁?, id: '82703' },
|
||
actualPrice: '90.1',
|
||
payMethod: '浣欓鏀粯',
|
||
payTime: '2026-02-02 16:10:17',
|
||
statusName: '鏈牳閿€',
|
||
primaryAction: '绔嬪嵆鏍搁攢'
|
||
},
|
||
{
|
||
sn: 'cp541268226856714240',
|
||
typeName: '鏅€氳鍗?,
|
||
typeColor: 'green',
|
||
cancelStatus: '',
|
||
product: {
|
||
img: '/static/logo.png',
|
||
name: 'UR2024澶忓鏂版濂宠澶嶅彜绾姘涘洿鎰熶竴瀛楄偐鐭T鎭よ～UWG440060'
|
||
},
|
||
user: { phone: '鐜嬫瘏涓嶇潯浜?, id: '82689' },
|
||
actualPrice: '鏈敮浠?,
|
||
payMethod: '--',
|
||
payTime: '--',
|
||
statusName: '鏈敮浠?,
|
||
primaryAction: '缂栬緫'
|
||
},
|
||
{
|
||
sn: 'cp541262080745930752',
|
||
typeName: '绉掓潃璁㈠崟',
|
||
typeColor: 'blue',
|
||
cancelStatus: '',
|
||
product: {
|
||
img: '/static/logo.png',
|
||
name: '鐖卞鑹烘櫤鑳?濂囬亣LT01 鎶曞奖浠?瀹剁敤鍗у 瓒呴珮娓呮墜鏈轰究鎼烘姇褰辨満 (4K瓒呮竻 鏀寔...'
|
||
},
|
||
user: { phone: '177****8361', id: '82697' },
|
||
actualPrice: '鏈敮浠?,
|
||
payMethod: '--',
|
||
payTime: '--',
|
||
statusName: '鏈敮浠?,
|
||
primaryAction: '缂栬緫'
|
||
}
|
||
])
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.order-list-page {
|
||
/* padding removed */
|
||
|
||
|
||
}
|
||
|
||
.filter-card {
|
||
background-color: #fff;
|
||
padding: 24px;
|
||
border-radius: 4px;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.filter-row {
|
||
display: flex;
|
||
flex-direction: row;
|
||
flex-wrap: wrap;
|
||
gap: 24px;
|
||
}
|
||
|
||
.filter-item {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
|
||
.label {
|
||
font-size: 14px;
|
||
color: #333;
|
||
width: 70px;
|
||
}
|
||
}
|
||
|
||
.mock-select {
|
||
width: 160px;
|
||
height: 32px;
|
||
border: 1px solid #d9d9d9;
|
||
border-radius: 4px;
|
||
padding: 0 12px;
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
text { font-size: 14px; color: #595959; }
|
||
}
|
||
|
||
.mock-date-range {
|
||
width: 240px;
|
||
height: 32px;
|
||
border: 1px solid #d9d9d9;
|
||
border-radius: 4px;
|
||
padding: 0 12px;
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
.cal-icon { width: 14px; height: 14px; margin-right: 8px; opacity: 0.4; }
|
||
.placeholder { font-size: 14px; color: #bfbfbf; }
|
||
}
|
||
|
||
.search-group {
|
||
display: flex;
|
||
flex-direction: row;
|
||
border: 1px solid #d9d9d9;
|
||
border-radius: 4px;
|
||
height: 32px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.search-select {
|
||
width: 80px;
|
||
border-right: 1px solid #d9d9d9;
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 4px;
|
||
background-color: #fafafa;
|
||
text { font-size: 14px; color: #595959; }
|
||
}
|
||
|
||
.search-input {
|
||
flex: 1;
|
||
border: none;
|
||
padding: 0 12px;
|
||
font-size: 14px;
|
||
width: 120px;
|
||
}
|
||
|
||
.arrow-down {
|
||
width: 0; height: 0;
|
||
border-left: 4px solid transparent;
|
||
border-right: 4px solid transparent;
|
||
border-top: 5px solid #bfbfbf;
|
||
}
|
||
|
||
.btn-row {
|
||
margin-top: 16px;
|
||
display: flex;
|
||
flex-direction: row;
|
||
gap: 8px;
|
||
}
|
||
|
||
.btn {
|
||
height: 32px;
|
||
padding: 0 16px;
|
||
font-size: 14px;
|
||
border-radius: 4px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin: 0;
|
||
}
|
||
|
||
.btn-primary { background-color: #1890ff; color: #fff; border: none; }
|
||
.btn-default { background-color: #fff; color: #595959; border: 1px solid #d9d9d9; }
|
||
|
||
.content-card {
|
||
background-color: #fff;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
.status-tabs {
|
||
display: flex;
|
||
flex-direction: row;
|
||
border-bottom: 1px solid #f0f0f0;
|
||
padding: 0 16px;
|
||
}
|
||
|
||
.tab-item {
|
||
padding: 16px 20px;
|
||
cursor: pointer;
|
||
position: relative;
|
||
display: flex;
|
||
flex-direction: row;
|
||
gap: 2px;
|
||
|
||
.tab-text { font-size: 14px; color: #595959; }
|
||
.tab-count { font-size: 14px; color: #595959; }
|
||
|
||
&.active {
|
||
.tab-text, .tab-count { color: #1890ff; font-weight: 500; }
|
||
&::after {
|
||
content: '';
|
||
position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: #1890ff;
|
||
}
|
||
}
|
||
}
|
||
|
||
.action-bar {
|
||
padding: 16px 20px;
|
||
display: flex;
|
||
flex-direction: row;
|
||
gap: 12px;
|
||
}
|
||
|
||
.action-btn {
|
||
height: 32px;
|
||
padding: 0 16px;
|
||
font-size: 14px;
|
||
border-radius: 4px;
|
||
margin: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.btn-blue { background-color: #1890ff; color: #fff; border: none; }
|
||
.btn-outline { background-color: #fff; color: #595959; border: 1px solid #d9d9d9; }
|
||
|
||
/* 琛ㄦ牸鏍峰紡 */
|
||
.order-table {
|
||
width: 100%;
|
||
}
|
||
|
||
.thead {
|
||
display: flex;
|
||
flex-direction: row;
|
||
background-color: #f0f7ff;
|
||
}
|
||
|
||
.th {
|
||
padding: 12px 8px;
|
||
font-size: 14px;
|
||
color: #595959;
|
||
font-weight: 500;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.tr {
|
||
display: flex;
|
||
flex-direction: row;
|
||
border-bottom: 1px solid #f0f0f0;
|
||
&:hover { background-color: #fafafa; }
|
||
}
|
||
|
||
.td {
|
||
padding: 16px 8px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
}
|
||
|
||
/* 鍒楀鎺у埗 */
|
||
.col-check { width: 50px; justify-content: center; align-items: center; }
|
||
.col-order { width: 220px; }
|
||
.col-product { flex: 1; }
|
||
.col-user { width: 160px; }
|
||
.col-price { width: 100px; }
|
||
.col-pay { width: 100px; }
|
||
.col-time { width: 160px; }
|
||
.col-status { width: 100px; }
|
||
.col-op { width: 120px; }
|
||
|
||
/* 鍗曞厓鏍煎叿浣撳唴瀹规牱寮?*/
|
||
.order-sn { font-size: 13px; color: #262626; margin-bottom: 4px; }
|
||
.order-type { font-size: 12px; }
|
||
.blue { color: #1890ff; }
|
||
.purple { color: #722ed1; }
|
||
.green { color: #52c41a; }
|
||
.cancel-text { font-size: 12px; color: #ff4d4f; margin-top: 4px; }
|
||
|
||
.product-info-wrap {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: flex-start;
|
||
gap: 8px;
|
||
}
|
||
|
||
.p-img { width: 44px; height: 44px; border-radius: 4px; background-color: #f5f5f5; flex-shrink: 0; }
|
||
.p-name { font-size: 13px; color: #595959; line-height: 1.5; }
|
||
|
||
.u-info { font-size: 13px; color: #595959; }
|
||
.price-val { font-size: 14px; color: #262626; }
|
||
.pay-text, .time-text, .status-text { font-size: 13px; color: #595959; }
|
||
|
||
.op-links {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
gap: 12px;
|
||
}
|
||
|
||
.op-link { font-size: 13px; cursor: pointer; }
|
||
.primary { color: #1890ff; }
|
||
|
||
.op-link-more {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
gap: 4px;
|
||
}
|
||
.more-text { font-size: 13px; color: #1890ff; }
|
||
.arrow-down-blue {
|
||
width: 0; height: 0;
|
||
border-left: 3px solid transparent;
|
||
border-right: 3px solid transparent;
|
||
border-top: 4px solid #1890ff;
|
||
}
|
||
</style>
|
||
|