|
@@ -1,71 +1,97 @@
|
|
|
<template>
|
|
|
- <div>
|
|
|
- <van-tabs @change="change" v-model="active">
|
|
|
- <van-tab title="未下单">
|
|
|
- <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
|
|
|
- <div style="min-height: calc(100vh - 110px)"></div>
|
|
|
- </van-pull-refresh>
|
|
|
- </van-tab>
|
|
|
- <van-tab title="已下单">
|
|
|
- <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
|
|
|
- <div style="min-height: calc(100vh - 110px)"></div>
|
|
|
- </van-pull-refresh>
|
|
|
- </van-tab>
|
|
|
- </van-tabs>
|
|
|
+ <div style="overflow-y: scroll;">
|
|
|
+ <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
|
|
|
+ <div style="min-height: calc(100vh - 93px);padding: 13px 0;">
|
|
|
+ <div
|
|
|
+ class="card"
|
|
|
+ v-for="(item, index) in list"
|
|
|
+ :key="item.order_id + '-' + index"
|
|
|
+ >
|
|
|
+ <div class="card_head" v-text="item.order_time"></div>
|
|
|
+ <div class="card_body">
|
|
|
+ <van-card
|
|
|
+ v-for="(v, i) in item.goods"
|
|
|
+ :key="v.goods_url + i"
|
|
|
+ :num="v.goods_quantity"
|
|
|
+ :price="(v.goods_price*1).toFixed(2)"
|
|
|
+ :title="v.goods_title"
|
|
|
+ :thumb="v.goods_url"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div class="card_footer" style="text-align: right">合计:{{totalPrice(item.goods)}}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </van-pull-refresh>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-let size = 10, page= 1;
|
|
|
+let size = 10,
|
|
|
+ page = 1;
|
|
|
import { listOrder } from "@/api/index";
|
|
|
import {
|
|
|
- Tab as VanTab,
|
|
|
- Tabs as VanTabs,
|
|
|
Toast,
|
|
|
PullRefresh as VanPullRefresh,
|
|
|
+ Card as VanCard,
|
|
|
} from "vant";
|
|
|
import "vant/lib/toast/style/index";
|
|
|
+import "vant/lib/card/style/index";
|
|
|
import "vant/lib/pull-refresh/style/index";
|
|
|
-import "vant/lib/tab/style/index";
|
|
|
-import "vant/lib/tabs/style/index";
|
|
|
export default {
|
|
|
name: "orders",
|
|
|
data() {
|
|
|
return {
|
|
|
- active: 0,
|
|
|
isLoading: false,
|
|
|
+ list: [],
|
|
|
};
|
|
|
},
|
|
|
mounted() {
|
|
|
- this.active = Number(this.$route.query.active || 0);
|
|
|
+ page = 1;
|
|
|
+ size = 10;
|
|
|
listOrder({ size, page }).then(r => {
|
|
|
- console.log(r);
|
|
|
+ this.list = (r || []).reverse();
|
|
|
+ console.log("--------->", this.list);
|
|
|
});
|
|
|
},
|
|
|
computed: {},
|
|
|
methods: {
|
|
|
onRefresh() {
|
|
|
setTimeout(() => {
|
|
|
- Toast("刷新成功 " + this.active);
|
|
|
+ Toast("刷新成功 ");
|
|
|
this.isLoading = false;
|
|
|
}, 1000);
|
|
|
},
|
|
|
- change() {
|
|
|
- if (this.$route.query.active === this.active) return;
|
|
|
- this.$router.push({
|
|
|
- query: {
|
|
|
- active: this.active,
|
|
|
- },
|
|
|
- });
|
|
|
- },
|
|
|
+ totalPrice(list){
|
|
|
+ let total = 0;
|
|
|
+ for (let i = 0; i < list.length; i++) {
|
|
|
+ const v = list[i];
|
|
|
+ total += v.goods_quantity*v.goods_price * 100;
|
|
|
+ }
|
|
|
+ return (total/100).toFixed(2)
|
|
|
+ }
|
|
|
},
|
|
|
beforeUnmount: function () {},
|
|
|
components: {
|
|
|
- VanTab,
|
|
|
- VanTabs,
|
|
|
VanPullRefresh,
|
|
|
+ VanCard,
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
-<style></style>
|
|
|
+<style>
|
|
|
+.card {
|
|
|
+ border-radius: 4px;
|
|
|
+ background-color: #fafafa;
|
|
|
+ padding: 0 11px;
|
|
|
+ margin: 0 13px 13px 13px;
|
|
|
+}
|
|
|
+.card > div {
|
|
|
+ /* height: 24px; */
|
|
|
+ line-height: 24px;
|
|
|
+ font-size: 12px;
|
|
|
+}
|
|
|
+.card .card_body {
|
|
|
+ border-top: 1px solid #fff;
|
|
|
+ border-bottom: 1px dashed #fff;
|
|
|
+}
|
|
|
+</style>
|