scottpan/integral-shop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

miao33: 从 main 同步 single_uniapp22miao，dart-sass 兼容修复，DEPLOY.md 更新

Browse Source 
- 从 main 获取 single_uniapp22miao 子项目
- dart-sass: /deep/ -> ::v-deep，calc 运算符加空格
- DEPLOY.md 采用 shccd159 版本（4 子项目架构说明）

Made-with: Cursor
This commit is contained in:
apple
2026-03-16 11:16:42 +08:00
parent 9c29721dc4
commit 079076a70e
356 changed files with 569762 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files

544
single_uniapp22miao/pages/sub-pages/rushing-order/detail.vue Normal file
View File

@@ -0,0 +1,544 @@
<template>
<view class="order-detail-page">
<!-- 状态栏 -->
<view class="status-bar" :class="'status-' + orderInfo.status">
<text class="status-icon">{{ getStatusIcon() }}</text>
<text class="status-text">{{ getStatusText() }}</text>
</view>
<!-- 地址信息 -->
<view class="address-section" v-if="orderInfo.consignee">
<view class="section-title">
<text>收货信息</text>
</view>
<view class="address-content">
<view class="user-info">
<text class="name">{{ orderInfo.consignee }}</text>
<text class="phone">{{ orderInfo.phone }}</text>
</view>
<view class="address">
{{ orderInfo.province }} {{ orderInfo.city }}
{{ orderInfo.area }} {{ orderInfo.address }}
</view>
<view class="delivery-method">
<text>提货方式：{{ orderInfo.delivery_method || '线下提货' }}</text>
</view>
</view>
</view>
<!-- 商品信息 -->
<view class="goods-section">
<view class="goods-item">
<image :src="getGoodsImage()" class="goods-image"></image>
<view class="goods-info">
<view class="goods-name">{{ getGoodsTitle() }}</view>
<view class="goods-spec">规格：默认</view>
<view class="seller-info">
<text class="seller-label">卖家</text>
<text class="seller-name">{{ getSellerName() }}</text>
</view>
<view class="seller-phone">
<text class="phone-label">卖家电话：</text>
<text class="phone-number">{{ getSellerPhone() }}</text>
</view>
</view>
<view class="goods-right">
<view class="goods-price">¥{{ orderInfo.total_money }}</view>
<view class="goods-num">x1</view>
</view>
</view>
</view>
<!-- 协议部分 -->
<view class="agreement-section">
<view class="agreement-item">
<text class="agreement-icon">✓</text>
<text class="agreement-text">《购买委托代卖协议》</text>
</view>
</view>
<!-- 底部操作栏 -->
<view class="bottom-bar" v-if="orderInfo.status != 3">
<button
v-if="orderInfo.status == 0"
class="btn cancel-btn"
@click="cancelOrder"
>
取消订单
</button>
<button
v-if="orderInfo.status == 0"
class="btn primary-btn"
@click="payOrder"
>
确认付款
</button>
<button
v-if="orderInfo.status == 1"
class="btn primary-btn"
@click="confirmOrder"
>
确认收货
</button>
<button
v-if="orderInfo.status == 2"
class="btn primary-btn"
@click="resellOrder"
>
转卖
</button>
</view>
</view>
</template>
<script>
import { getOrderDetail, cancelOrder, payOrder as payOrderAPI, confirmOrder as confirmOrderAPI, resellOrder as resellOrderAPI } from '@/api/miao.js';
export default {
data() {
return {
orderId: null,
orderInfo: {},
autoPay: false
}
},
onLoad(options) {
this.orderId = options.id;
this.autoPay = options.pay == '1';
this.loadOrderDetail();
},
methods: {
// 加载订单详情
async loadOrderDetail() {
try {
// 使用正确导入的API函数获取订单详情
const res = await getOrderDetail(this.orderId);
if (res.code === 0) {
this.orderInfo = res.data;
// 如果需要自动支付
if (this.autoPay && this.orderInfo.status == 0) {
this.payOrder();
}
}
} catch (error) {
console.error('加载订单详情失败:', error);
uni.showToast({
title: '加载失败',
icon: 'none'
});
}
},
// 获取状态图标
getStatusIcon() {
const iconMap = {
0: '⏰',
1: '🚚',
2: '✅',
3: '❌'
};
return iconMap[this.orderInfo.status] || '';
},
// 获取状态文本
getStatusText() {
const textMap = {
0: '待支付',
1: '已支付，等待确认',
2: '订单已完成',
3: '订单已取消'
};
return textMap[this.orderInfo.status] || '';
},
// 获取商品图片
getGoodsImage() {
// 适配可能的数据结构变化，确保即使数据格式不同也能正常显示
return this.orderInfo.goods_image || (this.orderInfo.goods && this.orderInfo.goods.image) || '';
},
// 获取商品标题
getGoodsTitle() {
return this.orderInfo.goods_name || (this.orderInfo.goods && this.orderInfo.goods.title) || '';
},
// 获取卖家姓名
getSellerName() {
return this.orderInfo.seller_name || (this.orderInfo.seller && this.orderInfo.seller.nickname) || '';
},
// 获取卖家电话
getSellerPhone() {
return this.orderInfo.seller_phone || (this.orderInfo.seller && this.orderInfo.seller.mobile) || '';
},
// 取消订单
cancelOrder() {
uni.showModal({
title: '提示',
content: '确定要取消该订单吗？',
success: async (res) => {
if (res.confirm) {
try {
const result = await cancelOrder({ id: this.orderId });
if (result.code === 0) {
this.orderInfo.status = 3;
uni.showToast({
title: '订单已取消',
icon: 'success'
});
} else {
uni.showToast({
title: result.msg || '取消失败',
icon: 'none'
});
}
} catch (error) {
console.error('取消订单失败:', error);
uni.showToast({
title: error.msg || '取消失败',
icon: 'none'
});
}
}
}
});
},
// 支付订单
async payOrder() {
try {
const res = await payOrderAPI({ id: this.orderId });
if (res.code === 0) {
// 处理支付结果
if (res.data && res.data.pay_url) {
// 如果有支付链接，跳转到支付页面
uni.navigateTo({
url: `/pages/users/user_payment/user_payment?pay_url=${encodeURIComponent(res.data.pay_url)}`
});
} else {
uni.showToast({
title: '支付成功',
icon: 'success'
});
// 刷新订单详情
setTimeout(() => {
this.loadOrderDetail();
}, 1500);
}
} else {
uni.showToast({
title: res.msg || '支付失败',
icon: 'none'
});
}
} catch (error) {
console.error('支付订单失败:', error);
uni.showToast({
title: error.msg || '支付失败',
icon: 'none'
});
}
},
// 确认收货
confirmOrder() {
uni.showModal({
title: '提示',
content: '确认收到货物了吗？',
success: async (res) => {
if (res.confirm) {
try {
const result = await confirmOrderAPI({ id: this.orderId });
if (result.code === 0) {
this.orderInfo.status = 2;
uni.showToast({
title: '确认成功',
icon: 'success'
});
} else {
uni.showToast({
title: result.msg || '确认失败',
icon: 'none'
});
}
} catch (error) {
console.error('确认收货失败:', error);
uni.showToast({
title: error.msg || '确认失败',
icon: 'none'
});
}
}
}
});
},
// 转卖订单
resellOrder() {
uni.showModal({
title: '提示',
content: '确定要将该订单转卖吗？',
success: async (res) => {
if (res.confirm) {
try {
const result = await resellOrderAPI({ id: this.orderId });
if (result.code === 0) {
uni.showToast({
title: '转卖成功',
icon: 'success'
});
setTimeout(() => {
uni.navigateBack();
}, 1500);
} else {
uni.showToast({
title: result.msg || '转卖失败',
icon: 'none'
});
}
} catch (error) {
console.error('转卖订单失败:', error);
uni.showToast({
title: error.msg || '转卖失败',
icon: 'none'
});
}
}
}
});
}
}
}
</script>
<style lang="scss" scoped>
.order-detail-page {
min-height: 100vh;
background-color: #f5f5f5;
padding-bottom: 120rpx;
}
.status-bar {
padding: 30rpx;
text-align: center;
color: #fff;
&.status-0 {
background: linear-gradient(135deg, #FF6B6B, #FF4757);
}
&.status-1 {
background: linear-gradient(135deg, #FF9800, #FF5722);
}
&.status-2 {
background: linear-gradient(135deg, #4CAF50, #45a049);
}
&.status-3 {
background: linear-gradient(135deg, #999, #666);
}
.status-icon {
font-size: 60rpx;
display: block;
margin-bottom: 10rpx;
}
.status-text {
font-size: 28rpx;
font-weight: bold;
}
}
.address-section,
.goods-section,
.agreement-section {
background-color: #fff;
margin: 20rpx 0;
padding: 30rpx;
}
.section-title {
margin-bottom: 20rpx;
text {
font-size: 28rpx;
color: #333;
font-weight: bold;
}
}
.address-content {
.user-info {
margin-bottom: 15rpx;
.name {
font-size: 30rpx;
font-weight: bold;
color: #333;
margin-right: 20rpx;
}
.phone {
font-size: 28rpx;
color: #666;
}
}
.address {
font-size: 26rpx;
color: #666;
line-height: 1.5;
margin-bottom: 15rpx;
}
.delivery-method {
font-size: 26rpx;
color: #666;
}
}
.goods-item {
display: flex;
.goods-image {
width: 180rpx;
height: 180rpx;
border-radius: 8rpx;
margin-right: 20rpx;
background-color: #f5f5f5;
}
.goods-info {
flex: 1;
.goods-name {
font-size: 30rpx;
color: #333;
margin-bottom: 15rpx;
line-height: 1.4;
}
.goods-spec {
font-size: 26rpx;
color: #666;
margin-bottom: 15rpx;
}
.seller-info {
margin-bottom: 10rpx;
.seller-label {
font-size: 26rpx;
color: #666;
margin-right: 10rpx;
}
.seller-name {
font-size: 26rpx;
color: #FF6B6B;
background-color: #FFF0F0;
padding: 2rpx 10rpx;
border-radius: 4rpx;
}
}
.seller-phone {
.phone-label {
font-size: 26rpx;
color: #666;
}
.phone-number {
font-size: 26rpx;
color: #333;
}
}
}
.goods-right {
text-align: right;
.goods-price {
font-size: 32rpx;
color: #FF4757;
font-weight: bold;
margin-bottom: 10rpx;
}
.goods-num {
font-size: 28rpx;
color: #999;
}
}
}
.agreement-section {
margin-top: 40rpx;
.agreement-item {
display: flex;
align-items: center;
.agreement-icon {
font-size: 24rpx;
color: #FF6B6B;
margin-right: 10rpx;
}
.agreement-text {
font-size: 26rpx;
color: #FF6B6B;
}
}
}
.bottom-bar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
display: flex;
align-items: center;
justify-content: flex-end;
gap: 20rpx;
padding: 20rpx 30rpx;
background-color: #fff;
box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.05);
.btn {
height: 80rpx;
line-height: 80rpx;
padding: 0 50rpx;
border-radius: 40rpx;
font-size: 30rpx;
border: none;
font-weight: bold;
&.cancel-btn {
background-color: #f5f5f5;
color: #666;
}
&.primary-btn {
background: linear-gradient(90deg, #FF6B6B, #FF4757);
color: #fff;
flex: 1;
text-align: center;
}
}
}
</style>

605
single_uniapp22miao/pages/sub-pages/rushing-order/index.vue Normal file
View File

@@ -0,0 +1,605 @@
<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>