siyunxing/dajiankang-uniapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
PC-202306242200\Administrator
2026-03-28 23:10:55 +08:00
commit 1c24452b6c
1735 changed files with 150474 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

344
pages/order/order.vue Normal file
View File

@@ -0,0 +1,344 @@
<template>
<view class="container">
<z-paging ref="paging" v-model="dataList" @query="queryList">
<!-- z-paging默认铺满全屏，此时页面所有view都应放在z-paging标签内，否则会被盖住 -->
<!-- 需要固定在页面顶部的view请通过slot="top"插入，包括自定义的导航栏 -->
<!--
<view slot="top">
</view> -->
<!-- 订单列表 -->
<wd-navbar title="订单" safeAreaInsetTop></wd-navbar>
<!-- 顶部导航栏 -->
<view class="nav-tabs">
<!-- 订单状态：0 - 待付款，1 - 已完成，2 - 已取消,示例值(2) -->
<view class="tab-item" :class="queryFrom.orderStatus === '' ? 'active' : ''" @click="changeStatus('')">全部</view>
<view class="tab-item" :class="queryFrom.orderStatus === 0 ? 'active' : ''" @click="changeStatus(0)">待付款</view>
<view class="tab-item" :class="queryFrom.orderStatus == 1 ? 'active' : ''" @click="changeStatus(1)">已完成</view>
<view class="tab-item" :class="queryFrom.orderStatus == 2 ? 'active' : ''" @click="changeStatus(2)">已取消</view>
</view>
<view class="order-list">
<!-- 订单项1 - 待付款 -->
<view class="order-item" v-for="(item, index) in dataList" :key="index">
<view class="order-header">
<text class="order-id">{{ item.orderNo }}</text>
<text class="order-status pending" v-if="item.orderStatus === 0">待付款</text>
<text class="order-status completed" v-if="item.orderStatus == 1">已完成</text>
</view>
<view class="order-content">
<image class="product-image" :src="item.goods.cover" mode="aspectFill"></image>
<view class="product-info">
<view class="product-name">
<view>{{ item.goods.name }}</view>
</view>
<view class="product-spec">
<view>{{ item.goods.specs }}</view>
<view class="product-count">×{{ item.goodsNum }}</view>
</view>
<view class="product-price">
<view style="font-size: 26rpx" v-if="item.deductionAmount">已抵扣金额：￥{{ item.deductionAmount }}</view>
<view v-else></view>
<text style="font-weight: bold">¥{{ item.payableAmount }}</text>
</view>
</view>
</view>
<view class="order-footer">
<view class="order-time">{{ timeFormat(item.createTime, 'yyyy-MM-dd hh:mm:ss') }}</view>
<view class="order-actions">
<!-- <view class="btn-cancel">取消订单</view> -->
<!-- <view class="btn-pay">去支付</view> -->
<view class="btn-buy-again" v-if="item.orderStatus == 1" @click="toGoods(item.goodsId)">再次购买</view>
</view>
</view>
</view>
<!-- <view class="order-item">
<view class="order-header">
<text class="order-id">GMZST202506040001</text>
<text class="order-status completed">已完成</text>
</view>
<view class="order-content">
<image class="product-image" src="/static/product.jpg" mode="aspectFill"></image>
<view class="product-info">
<view class="product-name">方愈苗药皮毒清软膏</view>
<view class="product-spec">12支/箱</view>
</view>
<view class="product-count">×230000</view>
<view class="product-price">¥50w</view>
</view>
<view class="order-footer">
<view class="order-time">2025-10-09 19:43:57</view>
<view class="order-actions">
<view class="btn-reorder">再来一单</view>
</view>
</view>
</view>
<view class="order-item">
<view class="order-header">
<text class="order-id">GMZST202506040001</text>
<text class="order-status cancelled">已取消</text>
</view>
<view class="order-content">
<image class="product-image" src="/static/product.jpg" mode="aspectFill"></image>
<view class="product-info">
<view class="product-name">方愈苗药皮毒清软膏</view>
<view class="product-spec">12支/箱</view>
</view>
<view class="product-count">×320000</view>
<view class="product-price">¥10w</view>
</view>
<view class="order-footer">
<view class="order-time">2025-10-09 19:43:57</view>
<view class="order-actions">
</view>
</view>
</view> -->
</view>
</z-paging>
</view>
</template>
<script setup lang="ts">
import api from '@/api/index';
import { ref } from 'vue';
import { timeFormat } from '@/utils/fun.js';
const paging = ref(null);
// v-model绑定的这个变量不要在分页请求结束中自己赋值，直接使用即可
const dataList = ref([]);
const queryFrom = ref({
orderType: 1,
payStatus: '',
orderStatus: ''
});
const changeStatus = (e) => {
queryFrom.value.orderStatus = e;
paging.value.reload();
};
const queryList = (pageNo, pageSize) => {
api.orderPage({ pageNo, pageSize, ...queryFrom.value })
.then((res: any) => {
paging.value.complete(res.list);
})
.catch((res) => {
paging.value.complete(false);
});
};
const toGoods = (e) => {
uni.navigateTo({
url: '/pages/goods/goods?id=' + e
});
};
</script>
<style scoped>
.container {
padding: 0;
background-color: #f5f5f5;
min-height: 100vh;
}
/* 导航标签样式 */
.nav-tabs {
display: flex;
/* justify-content: space-around; */
background-color: #ffffff;
padding: 24rpx 0;
border-bottom: 1rpx solid #eee;
}
.tab-item {
font-size: 15px;
color: #999;
position: relative;
padding: 0 10px;
z-index: 9;
}
.tab-item.active {
color: #333;
font-weight: bold;
}
.tab-item.active::after {
content: '';
position: absolute;
bottom: 0rpx;
right: 20rpx;
width: 40rpx;
height: 12rpx;
background: #627c54;
border-radius: 24rpx 24rpx 24rpx 24rpx;
z-index: 5;
opacity: 0.5;
}
/* 订单列表样式 */
.order-list {
padding: 10px;
}
.order-item {
background-color: #fff;
margin-bottom: 36rpx;
border-radius: 16rpx;
padding: 36rpx;
}
.order-header {
font-size: 28rpx;
display: flex;
justify-content: space-between;
border-bottom: 1rpx solid #eeeeee;
padding-bottom: 24rpx;
color: #232323;
}
.order-id {
font-size: 14px;
color: #333;
}
.order-status {
font-size: 14px;
font-weight: 500;
}
.pending {
color: #ff5722;
}
.completed {
color: #4caf50;
}
.cancelled {
color: #f44336;
}
.order-content {
display: flex;
padding: 20rpx 0;
}
.product-image {
width: 150rpx;
height: 150rpx;
border-radius: 8rpx;
margin-right: 20rpx;
background-color: #f0f0f0;
}
.product-info {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.product-name {
font-size: 28rpx;
color: #232323;
font-weight: 600;
display: flex;
align-items: center;
justify-content: space-between;
}
.product-spec {
font-size: 28rpx;
color: #666;
margin-top: 20rpx;
display: flex;
align-items: center;
justify-content: space-between;
}
.product-count {
font-size: 24rpx;
color: #232323;
text-align: right;
}
.product-price {
font-size: 36rpx;
color: #ff3d3d;
/* font-weight: bold; */
text-align: right;
display: flex;
align-items: center;
justify-content: space-between;
}
.order-footer {
display: flex;
justify-content: space-between;
align-items: center;
padding: 24rpx 0 0;
border-top: 1rpx solid #f5f5f5;
}
.order-time {
font-size: 24rpx;
color: #232323;
}
.order-actions {
display: flex;
gap: 10px;
}
.btn-cancel,
.btn-pay,
.btn-reorder,
.btn-buy-again {
width: 150rpx;
height: 56rpx;
border-radius: 28rpx;
/* border: 1rpx solid #999999; */
display: flex;
align-items: center;
justify-content: center;
font-size: 24rpx;
}
.btn-cancel {
border: 1rpx solid #999999;
color: #999;
}
.btn-pay {
color: #ff6f00;
border: 1rpx solid #ff6f00;
}
.btn-reorder {
color: #ffffff;
background-color: #458f3b;
border: none;
}
.btn-buy-again {
color: #ffffff;
background-color: #f44336;
border: none;
}
.btn-cancel:active,
.btn-pay:active,
.btn-reorder:active,
.btn-buy-again:active {
opacity: 0.8;
}
</style>