...
This commit is contained in:
@@ -1,20 +1,20 @@
|
||||
<template>
|
||||
<view class='card-view' @click.stop='goPath("/pages/mine/subs/order/detail")'>
|
||||
<view class='card-view' @click.stop='goPath(`/pages/mine/subs/order/detail?orderId=${item?.id}`)'>
|
||||
<view class='goods-info-view c-flex-row'>
|
||||
<image class='goods-image' :src='assetsUrl("test_bg.png")' />
|
||||
<image class='goods-image' :src='item?.orderGoods[0].images' />
|
||||
<view class='c-flex-column' style='flex: 1;'>
|
||||
<view class='c-flex-row'>
|
||||
<text class='goods-name'>女童夏装套装洋气装短袖阔腿裤子夏装套装</text>
|
||||
<text class='goods-name'>{{ item?.orderGoods[0].goodsName }}</text>
|
||||
<text class='status'>未支付</text>
|
||||
</view>
|
||||
<view class='bottom-view c-flex-row'>
|
||||
<text>
|
||||
均色，120cm
|
||||
{{ item?.orderGoods[0].stockStock.colorName }}，{{ item?.orderGoods[0].stockStock.sizeName }}
|
||||
</text>
|
||||
<text>
|
||||
共1件
|
||||
共{{ item?.itemNum }}件
|
||||
</text>
|
||||
<text>23.20元</text>
|
||||
<text>{{ item?.totalPrice }}元</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -37,9 +37,11 @@
|
||||
<script lang='ts' setup>
|
||||
import { assetsUrl } from '@/utils/assets';
|
||||
import { goPath } from '@/utils';
|
||||
import { PropType } from 'vue';
|
||||
import { OrderBean } from '@/api/order/types';
|
||||
|
||||
defineProps({
|
||||
item: Object
|
||||
item: Object as PropType<OrderBean>
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
@@ -1,104 +1,120 @@
|
||||
<template>
|
||||
<view class='content'>
|
||||
<view class='countdown c-flex-row'>
|
||||
<image :src='assetsUrl("ic_order.png")' />
|
||||
<view class='c-flex-column'>
|
||||
<text>
|
||||
待支付
|
||||
</text>
|
||||
<view class='c-flex-row'>
|
||||
<image :src='assetsUrl("ic_time.png")' />
|
||||
<text>支付剩余时间
|
||||
<text style='color: #F32B2B'>05:23</text>
|
||||
<scroll-view scroll-y>
|
||||
<view class='content'>
|
||||
<view class='countdown c-flex-row'>
|
||||
<image :src='assetsUrl("ic_order.png")' />
|
||||
<view class='c-flex-column'>
|
||||
<text>
|
||||
待支付
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class='address-view c-flex-column'>
|
||||
<view class='user-info c-flex-row'>
|
||||
<text>默认</text>
|
||||
<text>黄先生</text>
|
||||
<text>155****6532</text>
|
||||
<view style='flex: 1' />
|
||||
<text style='color: #5B96FB'>复制</text>
|
||||
</view>
|
||||
|
||||
<view class='addr c-flex-row'>
|
||||
<image :src='assetsUrl("ic_location.png")' />
|
||||
<text>湖南省 长沙市 详细地址详细地址详细地址</text>
|
||||
</view>
|
||||
<image class='dashed-line' :src='assetsUrl("ic_address_dashed_line.png")' />
|
||||
</view>
|
||||
|
||||
<view class='goods-info-view c-flex-column'>
|
||||
<view class='c-flex-row'>
|
||||
<image class='goods-image' :src='assetsUrl("test_bg.png")' />
|
||||
<view class='c-flex-column' style='flex: 1;'>
|
||||
<view class='c-flex-row'>
|
||||
<text class='goods-name'>女童夏装套装洋气装短袖阔腿裤子夏装套装</text>
|
||||
</view>
|
||||
<text style='color: #999999;margin-top: 30rpx'>
|
||||
2356235654
|
||||
</text>
|
||||
<view class='bottom-view c-flex-row'>
|
||||
<text>
|
||||
紫色，120cm x1
|
||||
<image :src='assetsUrl("ic_time.png")' />
|
||||
<text>支付剩余时间
|
||||
<text style='color: #F32B2B'>05:23</text>
|
||||
</text>
|
||||
<text>23.20</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class='divider' />
|
||||
<view class='address-view c-flex-column'>
|
||||
<view class='user-info c-flex-row'>
|
||||
<text>默认</text>
|
||||
<text>黄先生</text>
|
||||
<text>155****6532</text>
|
||||
<view style='flex: 1' />
|
||||
<text style='color: #5B96FB'>复制</text>
|
||||
</view>
|
||||
|
||||
<view class='remark-view c-flex-row'>
|
||||
<text style='flex: 1'>备注</text>
|
||||
<text>无备注</text>
|
||||
<view class='addr c-flex-row'>
|
||||
<image :src='assetsUrl("ic_location.png")' />
|
||||
<text>湖南省 长沙市 详细地址详细地址详细地址</text>
|
||||
</view>
|
||||
<image class='dashed-line' :src='assetsUrl("ic_address_dashed_line.png")' />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class='card-view'>
|
||||
<view class='c-flex-row'>
|
||||
<text class='card-view-title'>商品总价</text>
|
||||
<text class='card-view-value'>￥29.90</text>
|
||||
</view>
|
||||
<view class='c-flex-row'>
|
||||
<text class='card-view-title'>运费</text>
|
||||
<text class='card-view-value'>￥8</text>
|
||||
</view>
|
||||
<view class='c-flex-row'>
|
||||
<text class='card-view-title'>优惠券
|
||||
<text style='font-size: 22rpx;color: #F32B2B;'>已选最大优惠</text>
|
||||
</text>
|
||||
<text class='card-view-value' style='color: #F32B2B;margin: 0'>-￥20
|
||||
</text>
|
||||
</view>
|
||||
<view class='divider' />
|
||||
<view class='c-flex-row'>
|
||||
<view style='flex: 1' />
|
||||
<view class='c-flex-row'>
|
||||
<text class='card-view-value'>共1件商品 合计：
|
||||
<text style='font-size: 34rpx;color:#F32B2B'>¥29.90</text>
|
||||
</text>
|
||||
<view class='goods-info-view c-flex-column'>
|
||||
<view class='c-flex-row' style='margin-bottom: 20rpx' v-for='(item,index) in orderBean?.order.orderGoods'
|
||||
:key='index'>
|
||||
<image class='goods-image' :src='item.stockStock.images' />
|
||||
<view class='c-flex-column' style='flex: 1;'>
|
||||
<view class='c-flex-row'>
|
||||
<text class='goods-name'>{{ item.goodsName }}</text>
|
||||
</view>
|
||||
<text style='color: #999999;margin-top: 30rpx'>
|
||||
{{ item.goodsCode }}
|
||||
</text>
|
||||
<view class='bottom-view c-flex-row'>
|
||||
<text>
|
||||
{{ item.stockStock.colorName }}，{{ item.stockStock.sizeName }} x{{ item.goodsNum }}
|
||||
</text>
|
||||
<text>{{ item.consumePrice }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class='divider' />
|
||||
|
||||
<view class='remark-view c-flex-row'>
|
||||
<text style='flex: 1'>备注</text>
|
||||
<text>{{ orderBean?.order?.remark || '无备注' }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class='order-no c-flex-column'>
|
||||
<text>订单编号：1524625555555
|
||||
<text style='color: #5B96FB;margin-left: 10rpx'>复制</text>
|
||||
</text>
|
||||
<text>下单时间：2022-02-22 12：22：55</text>
|
||||
</view>
|
||||
<view class='card-view'>
|
||||
<view class='c-flex-row'>
|
||||
<text class='card-view-title'>商品总价</text>
|
||||
<text class='card-view-value'>￥{{ orderBean?.order?.totalPrice }}</text>
|
||||
</view>
|
||||
<view class='c-flex-row'>
|
||||
<text class='card-view-title'>运费</text>
|
||||
<text class='card-view-value'>￥8</text>
|
||||
</view>
|
||||
<view class='c-flex-row'>
|
||||
<text class='card-view-title'>优惠券
|
||||
<text style='font-size: 22rpx;color: #F32B2B;'>已选最大优惠</text>
|
||||
</text>
|
||||
<text class='card-view-value' style='color: #F32B2B;margin: 0'>-￥{{orderBean?.order?.reducePrice}}
|
||||
</text>
|
||||
</view>
|
||||
<view class='divider' />
|
||||
<view class='c-flex-row'>
|
||||
<view style='flex: 1' />
|
||||
<view class='c-flex-row'>
|
||||
<text class='card-view-value'>共{{ orderBean?.order?.itemNum }}件商品 合计：
|
||||
<text style='font-size: 34rpx;color:#F32B2B'>¥{{ orderBean?.order?.totalPrice }}</text>
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class='bottom-action-view c-flex-row'>
|
||||
<text @click.stop='cancel'>取消订单</text>
|
||||
<text @click.stop='payment'>立即支付</text>
|
||||
<view class='order-no c-flex-column'>
|
||||
<text>订单编号：{{ orderBean?.order?.id }}
|
||||
<text style='color: #5B96FB;margin-left: 10rpx'>复制</text>
|
||||
</text>
|
||||
<text>下单时间：{{ orderBean?.order?.createTime }}</text>
|
||||
</view>
|
||||
|
||||
<view class='bottom-action-view c-flex-row'>
|
||||
<text @click.stop='cancel'>取消订单</text>
|
||||
<text @click.stop='payment'>立即支付</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</template>
|
||||
|
||||
<script lang='ts' setup>
|
||||
import { assetsUrl } from '@/utils/assets';
|
||||
import { getOrderDetail } from '@/api/order';
|
||||
import { OrderBean } from '@/api/order/types';
|
||||
|
||||
const orderBean = ref<{
|
||||
order: OrderBean,
|
||||
stock: any[],
|
||||
paymentList: []
|
||||
}>();
|
||||
|
||||
onLoad(async (e: any) => {
|
||||
orderBean.value = await getOrderDetail(e.orderId);
|
||||
});
|
||||
|
||||
const cancel = () => {
|
||||
};
|
||||
@@ -148,7 +164,7 @@ const payment = () => {
|
||||
}
|
||||
|
||||
.address-view {
|
||||
padding-top: 38rpx;
|
||||
padding-top: 30rpx;
|
||||
background: #FFFFFF;
|
||||
|
||||
.user-info {
|
||||
@@ -328,7 +344,7 @@ const payment = () => {
|
||||
font-weight: 400;
|
||||
font-size: 30rpx;
|
||||
color: #333333;
|
||||
border-radius: 34rpx;
|
||||
border-radius: 50rpx;
|
||||
padding: 17rpx 45rpx;
|
||||
border: 1rpx solid #707070;
|
||||
margin-right: 20rpx;
|
||||
@@ -336,7 +352,7 @@ const payment = () => {
|
||||
|
||||
text:nth-of-type(2) {
|
||||
padding: 17rpx 45rpx;
|
||||
border-radius: 43rpx;
|
||||
border-radius: 50rpx;
|
||||
border: 1rpx solid #F32B2B;
|
||||
font-weight: bold;
|
||||
font-size: 30rpx;
|
||||
|
||||
@@ -1,21 +1,50 @@
|
||||
<template>
|
||||
<tabbar :titles="['全部', '进行中', '已结束']" @change='args => {}' />
|
||||
<order-item v-for='(item,index) in orderList' :key='index' :item='item' />
|
||||
<tabbar :titles="['全部', '进行中', '已结束']" @change='tabChange' />
|
||||
<u-list :list='orderList' :border='false' @scrolltolower='loadMore'>
|
||||
<u-list-item v-for='(item,index) in orderList' :key='index'>
|
||||
<order-item :item='item' />
|
||||
</u-list-item>
|
||||
<u-loadmore status='loading' />
|
||||
</u-list>
|
||||
</template>
|
||||
|
||||
<script lang='ts' setup>
|
||||
|
||||
import { getOrderList } from '@/api/goods';
|
||||
import { getOrderList } from '@/api/order';
|
||||
import OrderItem from '@/pages/mine/subs/order/components/order-item.vue';
|
||||
import { OrderBean } from '@/api/order/types';
|
||||
|
||||
const orderList = ref<OrderBean[]>([]);
|
||||
const currentPageNum = ref(1);
|
||||
const payStatus = ref(0);
|
||||
|
||||
const orderList = ref([1, 2, 4, 5]);
|
||||
onLoad((e) => {
|
||||
fetchData();
|
||||
});
|
||||
|
||||
const fetchData = async () => {
|
||||
const { rows } = await getOrderList({ pageNum: 1, pageSize: 10, obj: { payStatus: 0 } });
|
||||
orderList.value = rows;
|
||||
const tabChange = (index: number) => {
|
||||
payStatus.value = index;
|
||||
fetchData(true);
|
||||
};
|
||||
|
||||
const fetchData = async (refresh: boolean = true) => {
|
||||
if(!refresh) {
|
||||
currentPageNum.value += 1;
|
||||
}
|
||||
const { list } = await getOrderList({
|
||||
pageNum: currentPageNum.value,
|
||||
pageSize: 20,
|
||||
obj: { payStatus: payStatus.value }
|
||||
});
|
||||
if(refresh) {
|
||||
orderList.value = list;
|
||||
} else {
|
||||
orderList.value = orderList.value.concat(list);
|
||||
}
|
||||
};
|
||||
|
||||
const loadMore = () => {
|
||||
fetchData(false);
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user