606 lines
16 KiB
Vue
606 lines
16 KiB
Vue
|
<template>
|
|||
|
|
<view class="order-list-page">
|
|||
|
|
<!-- 买卖方切换 -->
|
|||
|
|
<view class="role-tabs">
|
|||
|
|
<view class="role-tab" :class="{ 'active': userRole === 0 }" @click="switchRole(0)">买方</view>
|
|||
|
|
<view class="role-tab" :class="{ 'active': userRole === 1 }" @click="switchRole(1)">卖方</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 状态Tab切换 -->
|
|||
|
|
<view class="status-tabs">
|
|||
|
|
<view v-for="(tab, index) in statusTabs" :key="index" class="status-tab" :class="{ 'active': currentTab === index }" @click="switchTab(index)">
|
|||
|
|
{{ tab }}
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 订单列表 -->
|
|||
|
|
<scroll-view scroll-y class="scroll-view" @scrolltolower="loadMore">
|
|||
|
|
<view class="order-list">
|
|||
|
|
<!-- 订单列表项 -->
|
|||
|
|
<view v-for="(order, index) in orderList" :key="order.id" class="order-item" @click="viewOrderDetail(order)">
|
|||
|
|
<!-- 订单头部 -->
|
|||
|
|
<view class="order-header">
|
|||
|
|
<view class="order-no">订单编号：{{ order.order_no }}</view>
|
|||
|
|
<view class="order-status">待支付</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 商品信息 -->
|
|||
|
|
<view class="goods-info">
|
|||
|
|
<image :src="order.goods_image || order.image" class="goods-image"></image>
|
|||
|
|
<view class="goods-detail">
|
|||
|
|
<view class="goods-name">{{ order.goods_name || order.name }}</view>
|
|||
|
|
<view class="goods-price">商品价格：¥{{ order.price }}</view>
|
|||
|
|
|
|||
|
|
<!-- 卖家信息 -->
|
|||
|
|
<view class="user-info">
|
|||
|
|
<view class="user-label">卖家</view>
|
|||
|
|
<view class="user-name">{{ order.seller_name || order.seller }}</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="user-phone">卖家电话：{{ order.seller_phone || order.seller_tel }}</view>
|
|||
|
|
|
|||
|
|
<!-- 买家信息 -->
|
|||
|
|
<view class="user-info">
|
|||
|
|
<view class="user-label">买家</view>
|
|||
|
|
<view class="user-name">{{ order.buyer_name || order.buyer }}</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="user-phone">买家电话：{{ order.buyer_phone || order.buyer_tel }}</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 订单时间 -->
|
|||
|
|
<view class="order-time">
|
|||
|
|
<view class="time-item">下单时间：{{ formatTime(order.created_at) }}</view>
|
|||
|
|
<view class="time-item">抢单时间：{{ formatTime(order.created_at) }}</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 操作按钮 -->
|
|||
|
|
<view class="order-actions">
|
|||
|
|
<button class="action-btn cancel" @click.stop="cancelOrder(order, index)">取消</button>
|
|||
|
|
<button class="action-btn primary" @click.stop="payOrder(order)">去支付</button>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 加载更多 -->
|
|||
|
|
<view class="load-more" v-if="orderList.length > 0">
|
|||
|
|
<text v-if="loading">加载中...</text>
|
|||
|
|
<text v-else-if="noMore">没有更多了</text>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 空状态 -->
|
|||
|
|
<view class="empty-state" v-if="orderList.length === 0 && !loading">
|
|||
|
|
<text class="icon">📦</text>
|
|||
|
|
<text class="text">暂无订单</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</scroll-view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import { getOrderList, cancelOrder, payOrder } from '@/api/miao.js';
|
|||
|
|
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
userRole: 0, // 0: 买方, 1: 卖方
|
|||
|
|
statusTabs: ['寄卖中/交易中', '已完成'],
|
|||
|
|
// 注意：当前type参数定义为1:寄卖中/交易中，2:已完成
|
|||
|
|
currentTab: 0,
|
|||
|
|
// 新增参数，用于直接从URL获取
|
|||
|
|
cate: 1, // 1: 买方, 2: 卖方
|
|||
|
|
type: 1, // 1: 仓库, 2: 交易中, 3: 已完成
|
|||
|
|
orderList: [],
|
|||
|
|
page: 1,
|
|||
|
|
limit: 20,
|
|||
|
|
loading: false,
|
|||
|
|
noMore: false
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
onLoad(options) {
|
|||
|
|
// 从URL参数中获取cate和type
|
|||
|
|
if (options.cate) {
|
|||
|
|
this.cate = parseInt(options.cate);
|
|||
|
|
// 根据cate设置用户角色：1=买方，2=卖方
|
|||
|
|
this.userRole = this.cate === 2 ? 1 : 0;
|
|||
|
|
}
|
|||
|
|
if (options.type) {
|
|||
|
|
this.type = parseInt(options.type);
|
|||
|
|
// 根据type设置当前标签页：1=寄卖中/交易中，2=已完成
|
|||
|
|
this.currentTab = this.type - 1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 兼容旧参数格式
|
|||
|
|
if (options.userRole) {
|
|||
|
|
this.userRole = parseInt(options.userRole);
|
|||
|
|
this.cate = this.userRole === 1 ? 2 : 1;
|
|||
|
|
}
|
|||
|
|
if (options.tab) {
|
|||
|
|
this.currentTab = parseInt(options.tab);
|
|||
|
|
// 转换旧tab为新type参数格式
|
|||
|
|
this.type = this.currentTab === 0 ? 1 : 2; // 仓库和交易中合并为1
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
this.loadOrderList();
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
methods: {
|
|||
|
|
// 切换买卖方
|
|||
|
|
switchRole(role) {
|
|||
|
|
if (this.userRole === role) return;
|
|||
|
|
|
|||
|
|
this.userRole = role;
|
|||
|
|
// 同步更新cate参数
|
|||
|
|
this.cate = role === 1 ? 2 : 1;
|
|||
|
|
|
|||
|
|
this.page = 1;
|
|||
|
|
this.noMore = false;
|
|||
|
|
this.orderList = [];
|
|||
|
|
this.loadOrderList();
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 切换Tab
|
|||
|
|
switchTab(index) {
|
|||
|
|
if (this.currentTab === index) return;
|
|||
|
|
|
|||
|
|
this.currentTab = index;
|
|||
|
|
// 同步更新type参数：1=寄卖中/交易中，2=已完成
|
|||
|
|
this.type = index + 1;
|
|||
|
|
|
|||
|
|
this.page = 1;
|
|||
|
|
this.noMore = false;
|
|||
|
|
this.orderList = [];
|
|||
|
|
this.loadOrderList();
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 格式化时间
|
|||
|
|
formatTime(time) {
|
|||
|
|
if (!time) return '';
|
|||
|
|
const date = new Date(time);
|
|||
|
|
const year = date.getFullYear();
|
|||
|
|
const month = String(date.getMonth() + 1).padStart(2, '0');
|
|||
|
|
const day = String(date.getDate()).padStart(2, '0');
|
|||
|
|
const hours = String(date.getHours()).padStart(2, '0');
|
|||
|
|
const minutes = String(date.getMinutes()).padStart(2, '0');
|
|||
|
|
const seconds = String(date.getSeconds()).padStart(2, '0');
|
|||
|
|
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 加载订单列表
|
|||
|
|
async loadOrderList() {
|
|||
|
|
if (this.loading || this.noMore) return;
|
|||
|
|
|
|||
|
|
this.loading = true;
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
// 直接使用data中的cate和type参数
|
|||
|
|
const res = await getOrderList({
|
|||
|
|
page: this.page,
|
|||
|
|
limit: this.limit,
|
|||
|
|
cate: this.cate,
|
|||
|
|
type: this.type
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
if (res.code === 0) {
|
|||
|
|
const list = res.data.list || [];
|
|||
|
|
|
|||
|
|
// 处理数据，确保字段一致性
|
|||
|
|
const processedList = list.map(item => ({
|
|||
|
|
...item,
|
|||
|
|
// 确保有必要的字段
|
|||
|
|
id: item.id || item.order_id || '',
|
|||
|
|
order_no: item.order_no || item.order_id || '',
|
|||
|
|
goods_image: item.goods_image || item.image || '',
|
|||
|
|
goods_name: item.goods_name || item.name || '商品',
|
|||
|
|
price: item.price || item.goods_price || '0.00',
|
|||
|
|
created_at: item.created_at || item.create_time || new Date().toISOString(),
|
|||
|
|
seller_name: item.seller_name || item.seller || '未知',
|
|||
|
|
seller_phone: item.seller_phone || item.seller_tel || '',
|
|||
|
|
buyer_name: item.buyer_name || item.buyer || '未知',
|
|||
|
|
buyer_phone: item.buyer_phone || item.buyer_tel || ''
|
|||
|
|
}));
|
|||
|
|
|
|||
|
|
if (processedList.length < this.limit) {
|
|||
|
|
this.noMore = true;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
this.orderList = this.page === 1 ? processedList : [...this.orderList, ...processedList];
|
|||
|
|
}
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('加载订单失败:', error);
|
|||
|
|
uni.showToast({
|
|||
|
|
title: error.msg || '加载失败，请重试',
|
|||
|
|
icon: 'none'
|
|||
|
|
});
|
|||
|
|
} finally {
|
|||
|
|
this.loading = false;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 加载更多
|
|||
|
|
loadMore() {
|
|||
|
|
if (!this.loading && !this.noMore) {
|
|||
|
|
this.page++;
|
|||
|
|
this.loadOrderList();
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 确认收货和确认发货功能暂时隐藏，根据参考图不显示这些按钮
|
|||
|
|
// 确认收货功能已移除
|
|||
|
|
// 确认发货功能已移除
|
|||
|
|
// 转卖功能已移除
|
|||
|
|
|
|||
|
|
// 查看订单详情
|
|||
|
|
viewOrderDetail(order) {
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url: `/pages/sub-pages/rushing-order/detail?id=${order.id}`
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 取消订单
|
|||
|
|
cancelOrder(order, index) {
|
|||
|
|
uni.showModal({
|
|||
|
|
title: '提示',
|
|||
|
|
content: '确定要取消该订单吗？',
|
|||
|
|
success: async (res) => {
|
|||
|
|
if (res.confirm) {
|
|||
|
|
try {
|
|||
|
|
const result = await cancelOrder({
|
|||
|
|
id: order.id
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
if (result.code === 0) {
|
|||
|
|
this.orderList[index].status = 3;
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '订单已取消',
|
|||
|
|
icon: 'success'
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
} catch (error) {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: error.msg || '取消失败',
|
|||
|
|
icon: 'none'
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 支付订单
|
|||
|
|
payOrder(order) {
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url: `/pages/sub-pages/rushing-order/detail?id=${order.id}&pay=1`
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 确认收货
|
|||
|
|
confirmOrder(order, index) {
|
|||
|
|
// 由于方法命名冲突，这里改为使用导入的confirmOrder接口
|
|||
|
|
const confirmOrderApi = async () => {
|
|||
|
|
try {
|
|||
|
|
const result = await this.$http.post('/api/order/confirm', {
|
|||
|
|
id: order.id
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
if (result.code === 0) {
|
|||
|
|
this.orderList[index].status = 2;
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '确认成功',
|
|||
|
|
icon: 'success'
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
} catch (error) {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: error.msg || '确认失败',
|
|||
|
|
icon: 'none'
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
uni.showModal({
|
|||
|
|
title: '提示',
|
|||
|
|
content: '确认收到货物了吗？',
|
|||
|
|
success: async (res) => {
|
|||
|
|
if (res.confirm) {
|
|||
|
|
await confirmOrderApi();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 确认发货
|
|||
|
|
deliverOrder(order, index) {
|
|||
|
|
uni.showModal({
|
|||
|
|
title: '提示',
|
|||
|
|
content: '确认已发货了吗？',
|
|||
|
|
success: async (res) => {
|
|||
|
|
if (res.confirm) {
|
|||
|
|
try {
|
|||
|
|
const result = await this.$http.post('/api/order/deliver', {
|
|||
|
|
id: order.id
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
if (result.code === 0) {
|
|||
|
|
this.orderList.splice(index, 1);
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '发货成功',
|
|||
|
|
icon: 'success'
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
} catch (error) {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: error.msg || '操作失败',
|
|||
|
|
icon: 'none'
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 转卖订单
|
|||
|
|
resellOrder(order) {
|
|||
|
|
uni.showModal({
|
|||
|
|
title: '提示',
|
|||
|
|
content: '确定要将该订单转卖吗？',
|
|||
|
|
success: async (res) => {
|
|||
|
|
if (res.confirm) {
|
|||
|
|
try {
|
|||
|
|
const result = await this.$http.post('/api/order/resell', {
|
|||
|
|
id: order.id
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
if (result.code === 0) {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '转卖成功',
|
|||
|
|
icon: 'success'
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 刷新列表
|
|||
|
|
this.page = 1;
|
|||
|
|
this.noMore = false;
|
|||
|
|
this.orderList = [];
|
|||
|
|
this.loadOrderList();
|
|||
|
|
}
|
|||
|
|
} catch (error) {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: error.msg || '转卖失败',
|
|||
|
|
icon: 'none'
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
.order-list-page {
|
|||
|
|
height: 100vh;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
background-color: #f5f5f5;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 买卖方切换 */
|
|||
|
|
.role-tabs {
|
|||
|
|
display: flex;
|
|||
|
|
background-color: #fff;
|
|||
|
|
padding: 20rpx;
|
|||
|
|
margin-bottom: 20rpx;
|
|||
|
|
|
|||
|
|
.role-tab {
|
|||
|
|
flex: 1;
|
|||
|
|
height: 70rpx;
|
|||
|
|
line-height: 70rpx;
|
|||
|
|
text-align: center;
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
color: #333;
|
|||
|
|
border-radius: 35rpx;
|
|||
|
|
background-color: #f5f5f5;
|
|||
|
|
margin: 0 10rpx;
|
|||
|
|
transition: all 0.3s;
|
|||
|
|
|
|||
|
|
&.active {
|
|||
|
|
background-color: #ff6666;
|
|||
|
|
color: #fff;
|
|||
|
|
font-weight: bold;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 状态Tab切换 */
|
|||
|
|
.status-tabs {
|
|||
|
|
display: flex;
|
|||
|
|
background-color: #fff;
|
|||
|
|
border-bottom: 1px solid #f0f0f0;
|
|||
|
|
|
|||
|
|
.status-tab {
|
|||
|
|
flex: 1;
|
|||
|
|
height: 90rpx;
|
|||
|
|
line-height: 90rpx;
|
|||
|
|
text-align: center;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #666;
|
|||
|
|
position: relative;
|
|||
|
|
|
|||
|
|
&.active {
|
|||
|
|
color: #ff6666;
|
|||
|
|
font-weight: bold;
|
|||
|
|
|
|||
|
|
&::after {
|
|||
|
|
content: '';
|
|||
|
|
position: absolute;
|
|||
|
|
bottom: 0;
|
|||
|
|
left: 50%;
|
|||
|
|
transform: translateX(-50%);
|
|||
|
|
width: 60rpx;
|
|||
|
|
height: 4rpx;
|
|||
|
|
background-color: #ff6666;
|
|||
|
|
border-radius: 2rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.scroll-view {
|
|||
|
|
flex: 1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.order-list {
|
|||
|
|
padding: 20rpx 30rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.order-item {
|
|||
|
|
background-color: #fff;
|
|||
|
|
border-radius: 20rpx;
|
|||
|
|
padding: 30rpx;
|
|||
|
|
margin-bottom: 20rpx;
|
|||
|
|
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
|
|||
|
|
|
|||
|
|
.order-header {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
margin-bottom: 30rpx;
|
|||
|
|
padding-bottom: 20rpx;
|
|||
|
|
border-bottom: 1px solid #f5f5f5;
|
|||
|
|
|
|||
|
|
.order-no {
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #333;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.order-status {
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #ff6666;
|
|||
|
|
font-weight: bold;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.goods-info {
|
|||
|
|
display: flex;
|
|||
|
|
margin-bottom: 30rpx;
|
|||
|
|
|
|||
|
|
.goods-image {
|
|||
|
|
width: 200rpx;
|
|||
|
|
height: 200rpx;
|
|||
|
|
border-radius: 10rpx;
|
|||
|
|
margin-right: 25rpx;
|
|||
|
|
background-color: #f5f5f5;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.goods-detail {
|
|||
|
|
flex: 1;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
|
|||
|
|
.goods-name {
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
color: #333;
|
|||
|
|
line-height: 1.4;
|
|||
|
|
margin-bottom: 20rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.goods-price {
|
|||
|
|
font-size: 36rpx;
|
|||
|
|
color: #ff6666;
|
|||
|
|
font-weight: bold;
|
|||
|
|
margin-bottom: 20rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.user-info {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
margin-bottom: 10rpx;
|
|||
|
|
|
|||
|
|
.user-label {
|
|||
|
|
background-color: #ff6666;
|
|||
|
|
color: #fff;
|
|||
|
|
padding: 4rpx 20rpx;
|
|||
|
|
border-radius: 15rpx;
|
|||
|
|
font-size: 22rpx;
|
|||
|
|
margin-right: 15rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.user-name {
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #333;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.user-phone {
|
|||
|
|
font-size: 26rpx;
|
|||
|
|
color: #666;
|
|||
|
|
margin-bottom: 10rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.order-time {
|
|||
|
|
margin-bottom: 30rpx;
|
|||
|
|
|
|||
|
|
.time-item {
|
|||
|
|
font-size: 26rpx;
|
|||
|
|
color: #999;
|
|||
|
|
margin-bottom: 8rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.order-actions {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: flex-end;
|
|||
|
|
gap: 20rpx;
|
|||
|
|
|
|||
|
|
.action-btn {
|
|||
|
|
height: 70rpx;
|
|||
|
|
line-height: 70rpx;
|
|||
|
|
padding: 0 40rpx;
|
|||
|
|
border-radius: 35rpx;
|
|||
|
|
border: none;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
|
|||
|
|
&.cancel {
|
|||
|
|
background-color: #f5f5f5;
|
|||
|
|
color: #666;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&.primary {
|
|||
|
|
background-color: #ff6666;
|
|||
|
|
color: #fff;
|
|||
|
|
font-weight: bold;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.load-more {
|
|||
|
|
padding: 30rpx;
|
|||
|
|
text-align: center;
|
|||
|
|
font-size: 26rpx;
|
|||
|
|
color: #999;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.empty-state {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
padding: 200rpx 0;
|
|||
|
|
|
|||
|
|
.icon {
|
|||
|
|
font-size: 120rpx;
|
|||
|
|
margin-bottom: 20rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.text {
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #999;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
|