183 lines
4.6 KiB
Vue
183 lines
4.6 KiB
Vue
<template>
|
|
<view class="order">
|
|
<z-paging ref="paging" v-model="dataList" @query="queryList">
|
|
<view style="height: 20rpx"></view>
|
|
<view style="display: flex; align-items: center; margin: 0 30rpx 30rpx">
|
|
<view
|
|
style="font-weight: bold; position: relative; margin-right: 50rpx"
|
|
:style="{
|
|
color: purposeType == item.id ? '#333' : '#bbb'
|
|
}"
|
|
v-for="(item, index) in tabbar"
|
|
:key="index"
|
|
@click="swichMenu(item.id)"
|
|
>
|
|
<view style="position: relative; z-index: 9">{{ item.name }}</view>
|
|
<view
|
|
v-if="purposeType == item.id"
|
|
style="width: 72rpx; height: 16rpx; background: #b6d0aa; border-radius: 48rpx 48rpx 48rpx 48rpx; position: absolute; bottom: -5rpx; left: 0"
|
|
></view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="p30">
|
|
<view class="order_view" v-for="i in dataList" :key="i" @click="navTo(`/pages/order/details?id=${i.id}`)">
|
|
<view class="order_view_dd">
|
|
<view>
|
|
<text style="font-weight: 500">订单号</text>
|
|
:{{ i.orderNo }}
|
|
</view>
|
|
<view>
|
|
<up-tag size="mini" v-if="i.status == 0" text="待支付" plain></up-tag>
|
|
<up-tag size="mini" v-if="i.status == -1" text="已取消" type="warning" plain></up-tag>
|
|
<up-tag size="mini" v-if="i.status == 1" text="支付成功" type="success" plain></up-tag>
|
|
<up-tag size="mini" v-if="i.status == -2" text="退款" type="error" plain></up-tag>
|
|
</view>
|
|
</view>
|
|
<view class="order_view_info">
|
|
<image class="order_view_info_img" :src="i.orderGoods.cover" mode="aspectFit"></image>
|
|
<view class="order_view_info_right">
|
|
<view class="order_view_info_right_tit">
|
|
<view style="display: flex; align-items: center">
|
|
<!-- <up-tag size="mini" :text="i.sourceType == 1 ? '商品' : '套餐'" bgColor="#4874e5" borderColor="#4874e5"></up-tag> -->
|
|
<view>
|
|
{{ i.orderGoods.name }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="order_view_info_right_num" style="display: flex; align-items: center; justify-content: space-between">数量:{{ i.num }}</view>
|
|
<view class="order_view_info_right_mon">
|
|
订单金额:
|
|
<text style="color: crimson">￥{{ i.payMoney }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view
|
|
style="
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
border-top: 1rpx solid rgba(153, 153, 153, 0.5);
|
|
margin-top: 15rpx;
|
|
padding-top: 15rpx;
|
|
"
|
|
>
|
|
<view style="font-size: 28rpx">{{ i.createdAt }}</view>
|
|
<view>
|
|
<up-tag size="mini" v-if="i.orderPlatform == 3" text="支付宝" plain></up-tag>
|
|
<up-tag size="mini" v-if="i.orderPlatform == 2" text="微信" type="success" plain></up-tag>
|
|
<up-tag size="mini" v-if="i.orderPlatform == 1" text="钱包" type="warning" plain></up-tag>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</z-paging>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { reactive, ref } from 'vue';
|
|
import { useNav } from '@/hooks/useNav.js';
|
|
import { onPullDownRefresh, onPageScroll, onReachBottom } from '@dcloudio/uni-app';
|
|
import { orderPage } from '@/api/api.js';
|
|
import { timeFormat } from '@/uni_modules/uview-plus';
|
|
const { navTo } = useNav();
|
|
|
|
const paging = ref(null);
|
|
let dataList = ref([]);
|
|
|
|
let dataFrom = reactive({
|
|
status: 1,
|
|
businessPayType: '',
|
|
sourceType: ''
|
|
});
|
|
|
|
let tabbar = [
|
|
{
|
|
name: '已支付',
|
|
id: 1
|
|
},
|
|
{
|
|
name: '待支付',
|
|
id: 0
|
|
},
|
|
{
|
|
name: '已取消',
|
|
id: -1
|
|
}
|
|
];
|
|
|
|
let purposeType = ref(1);
|
|
|
|
const swichMenu = (index) => {
|
|
dataFrom.status = index;
|
|
paging.value.reload();
|
|
};
|
|
|
|
|
|
|
|
|
|
const queryList = (pageNo, pageSize) => {
|
|
const params = {
|
|
current: pageNo,
|
|
pageSize: pageSize,
|
|
...dataFrom
|
|
};
|
|
|
|
orderPage(params)
|
|
.then((res) => {
|
|
paging.value.complete(res);
|
|
})
|
|
.catch((res) => {
|
|
paging.value.complete(false);
|
|
});
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.order {
|
|
&_view {
|
|
background: #ffffff;
|
|
border-radius: 16rpx;
|
|
padding: 25rpx;
|
|
margin-bottom: 30rpx;
|
|
&_info {
|
|
@include flex;
|
|
&_img {
|
|
width: 208rpx;
|
|
height: 208rpx;
|
|
margin-right: 15rpx;
|
|
border-radius: 10rpx;
|
|
}
|
|
&_right {
|
|
flex: 1;
|
|
font-size: 28rpx;
|
|
color: #232323;
|
|
&_tit {
|
|
@include flex($space: space-between);
|
|
margin-bottom: 15rpx;
|
|
}
|
|
&_num {
|
|
margin-bottom: 15rpx;
|
|
}
|
|
&_mon {
|
|
margin-bottom: 15rpx;
|
|
text {
|
|
color: #ff2e24;
|
|
}
|
|
}
|
|
&_time {
|
|
}
|
|
}
|
|
}
|
|
&_dd {
|
|
@include flex($space: space-between);
|
|
font-weight: bold;
|
|
font-size: 28rpx;
|
|
color: #232323;
|
|
margin-bottom: 15rpx;
|
|
}
|
|
}
|
|
}
|
|
</style>
|