上传代码
This commit is contained in:
213
uniapp04/pages/testseven/testseven.vue
Normal file
213
uniapp04/pages/testseven/testseven.vue
Normal file
@ -0,0 +1,213 @@
|
||||
<script setup lang="ts">
|
||||
import {apiImageUrl} from '../../API/api'
|
||||
import { ref,onMounted,computed,onUnmounted } from 'vue'
|
||||
|
||||
const currentIndex = ref(0);
|
||||
const tabs = ref([
|
||||
{ name: '全部' },
|
||||
{ name: '收入' },
|
||||
{ name: '退款' }
|
||||
]);
|
||||
|
||||
const switchTab = (index) => {
|
||||
currentIndex.value = index;
|
||||
};
|
||||
const orderList = ref([]);
|
||||
|
||||
const getOrder = () => {
|
||||
uni.request({
|
||||
url: apiImageUrl + '/api/orders/my/page',
|
||||
method: 'POST',
|
||||
data: {
|
||||
current: 1,
|
||||
endTime: "",
|
||||
id: "",
|
||||
pageSize: 100,
|
||||
pickupMethod: 0,
|
||||
sortField: "",
|
||||
sortOrder: "",
|
||||
startTime: "",
|
||||
state: 0
|
||||
},
|
||||
success(res) {
|
||||
console.log(res);
|
||||
orderList.value = res.data.data.records;
|
||||
console.log(orderList.value);
|
||||
},
|
||||
fail() {
|
||||
console.log('出错啦');
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 如果你需要在组件挂载时立即获取订单数据，可以使用 onMounted 钩子
|
||||
onMounted(() => {
|
||||
getOrder();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<scroll-view scroll-y class="preview">
|
||||
<!-- 商品详情 -->
|
||||
<view class="tab-menu">
|
||||
<view class="tab-item"
|
||||
v-for="(tab, index) in tabs"
|
||||
:key="index"
|
||||
:class="{active: currentIndex === index}"
|
||||
@click="switchTab(index)">
|
||||
{{ tab.name }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="content">
|
||||
<block v-if="currentIndex === 0">
|
||||
<view class="container">
|
||||
<view class="orderItem" v-for="(order, index) in orderList" :key="index">
|
||||
<view class="orderImg">
|
||||
<image src="https://tse4-mm.cn.bing.net/th/id/OIP-C.cDfrXgI1DKvU7OklwmBfewHaHa?rs=1&pid=ImgDetMain" class="img"></image>
|
||||
</view>
|
||||
<view class="orderMessage">
|
||||
<text class="money">+{{ order.totalPrice }}元</text>
|
||||
<br />
|
||||
<text class="time">下单时间:{{ order.createTime }}</text>
|
||||
<br />
|
||||
<text class="time">订单编号:{{ order.id }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
<block v-if="currentIndex === 1">
|
||||
<view class="container">
|
||||
<view class="orderItem" v-for="(order, index) in orderList" :key="index">
|
||||
<view class="orderImg">
|
||||
<image src="https://tse4-mm.cn.bing.net/th/id/OIP-C.cDfrXgI1DKvU7OklwmBfewHaHa?rs=1&pid=ImgDetMain" class="img"></image>
|
||||
</view>
|
||||
<view class="orderMessage">
|
||||
<text class="money">+{{ order.totalPrice }}元</text>
|
||||
<br />
|
||||
<text class="time">下单时间:{{ order.createTime }}</text>
|
||||
<br />
|
||||
<text class="time">订单编号:{{ order.id }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
<block v-if="currentIndex === 2">
|
||||
<view class="container">
|
||||
<view class="orderItem" v-for="(order, index) in orderList" :key="index">
|
||||
<view class="orderImg">
|
||||
<image src="https://tse4-mm.cn.bing.net/th/id/OIP-C.cDfrXgI1DKvU7OklwmBfewHaHa?rs=1&pid=ImgDetMain" class="img"></image>
|
||||
</view>
|
||||
<view class="orderMessage">
|
||||
<text class="money">+{{ order.totalPrice }}元</text>
|
||||
<br />
|
||||
<text class="time">下单时间:{{ order.createTime.substr(0, 29).replace('T', ' ') }}</text>
|
||||
<br />
|
||||
<text class="time">订单编号:{{ order.id }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</template>
|
||||
<style lang="scss">
|
||||
|
||||
.tabs {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
line-height: 60rpx;
|
||||
margin: 0 10rpx;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 4rpx 6rpx rgba(240, 240, 240, 0.6);
|
||||
position: relative;
|
||||
z-index: 9;
|
||||
|
||||
.item {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
padding: 20rpx;
|
||||
font-size: 28rpx;
|
||||
color: #262626;
|
||||
}
|
||||
|
||||
.cursor {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 18%;
|
||||
height: 6rpx;
|
||||
padding: 0 50rpx;
|
||||
background-color: #4095e5;
|
||||
/* 过渡效果 */
|
||||
transition: all 0.4s;
|
||||
}
|
||||
}
|
||||
.preview image {
|
||||
width: 100%;
|
||||
}
|
||||
page {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.tab-menu {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
padding: 10px 0;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
.tab-item {
|
||||
padding: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.tab-item.active {
|
||||
color: #4095e5;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.scroll-view {
|
||||
/* #ifndef APP-NVUE */
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
/* #endif */
|
||||
flex:1
|
||||
}
|
||||
.orderItem {
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
margin-bottom: 10px;
|
||||
background-color: #fff;
|
||||
}
|
||||
.orderImg {
|
||||
display: inline-block;
|
||||
width: 20%;
|
||||
height: 100%;
|
||||
margin: auto 0;
|
||||
|
||||
}
|
||||
.img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 15px;
|
||||
}
|
||||
.orderMessage {
|
||||
width: 75%;
|
||||
height: 80%;
|
||||
float: right;
|
||||
display: inline-block;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.money {
|
||||
font-size: 30rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.time {
|
||||
font-size: 25rpx;
|
||||
}
|
||||
.container {
|
||||
width: 90%;
|
||||
height: 100vh;
|
||||
margin: 0 auto;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user