|
|
@@ -1,141 +1,249 @@
|
|
|
<template>
|
|
|
- <div class="app-content">
|
|
|
- <block v-if="!$util.isEmpty(list.data)">
|
|
|
- <div class="list-wrap" v-for="(item, index) in list.data" :key="index" @click="pageTo({ url: '/pages/order/detail', query: { id: item.id } })" >
|
|
|
- <div class="list-top flex-center-between">
|
|
|
- <div class="app-color-3">编号：<text style="color:black;font-size:28upx;">{{ item.sendNum }}</text></div>
|
|
|
- <div class="app-price" style="color:black;">{{ item.status | constantfilter('ORDER_STATUS') }}</div>
|
|
|
- </div>
|
|
|
- <div class="list-bottom flex-center-between">
|
|
|
- <div>
|
|
|
- <span class="app-color-3">日期：</span>
|
|
|
- <span class="app-size-30">{{ item.addTime ? item.addTime.substring(5,16) : '' }}</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="list-bottom flex-center-between">
|
|
|
- <div>
|
|
|
- <span class="app-color-3">单号：</span>
|
|
|
- <span class="app-size-30">{{ item.orderSn }}</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="list-bottom flex-center-between">
|
|
|
- <div>
|
|
|
- <span class="app-color-3">金额：</span>
|
|
|
- <span class="app-size-30">¥{{ item.orderPrice ? parseFloat(item.orderPrice) : 0 }}</span>
|
|
|
- </div>
|
|
|
- <block v-if="item.status == 1">
|
|
|
- <button class="button-com red" @click.stop="pageTo({ url: '/pages/callback/index', query: { pageStatus: 1, orderSn: item.orderSn, totalPrice: item.orderPrice, couponId: item.couponId } })" >立即支付</button>
|
|
|
- </block>
|
|
|
- </div>
|
|
|
+ <view class="order-page">
|
|
|
+ <app-tabs :tabs="tabs" :isFixed="true" :currentTab="tabIndex" @change="change" itemWidth="20%"/>
|
|
|
|
|
|
- <div class="list-bottom flex-center-between" v-if="Number(item.remainDebtPrice)>0">
|
|
|
- <div>
|
|
|
- <span class="app-color-3">待结：</span>
|
|
|
- <span class="app-size-30" style="color:red;font-weight:bold;">¥{{ item.remainDebtPrice ? parseFloat(item.remainDebtPrice) : 0 }}</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <view style="margin-left:60upx;margin-top:110upx;padding-bottom:30upx;position: relative;">
|
|
|
+ <DateSelect @selectDateFn="selectDateFn" defaultShowName='时间' />
|
|
|
+ <button class="admin-button-com mini-btn blue" style="position: absolute;right:300upx;top:-8upx;" @click="selGhs()">{{ ghsName==''?'选花店':ghsName }}</button>
|
|
|
+ <button class="admin-button-com mini-btn blue" style="position: absolute;right:80upx;top:-8upx;" @click="resetSearch()">重置搜索</button>
|
|
|
+ </view>
|
|
|
|
|
|
- </div>
|
|
|
+ <block v-if="!$util.isEmpty(list.data)">
|
|
|
+ <view class="pay_list">
|
|
|
+ <OrderItem v-for="(item, index) in list.data" :key="index" :info="item" @click="goToDetail"></OrderItem>
|
|
|
+ </view>
|
|
|
</block>
|
|
|
<block v-else>
|
|
|
- <app-wrapper-empty title="暂无记录" :is-empty="$util.isEmpty(list.data)" />
|
|
|
+ <view>
|
|
|
+ <AppWrapperEmpty title="暂无数据" :is-empty="$util.isEmpty(list.data)"/>
|
|
|
+ </view>
|
|
|
</block>
|
|
|
- <wangCg :loginStyle.sync="globalLoginStyle" @goToLogin="loginTo()"></wangCg>
|
|
|
- </div>
|
|
|
+
|
|
|
+ </view>
|
|
|
</template>
|
|
|
<script>
|
|
|
-import { mapGetters } from 'vuex'
|
|
|
-import ListModule from "@/components/module/app-order-list";
|
|
|
-import AppWrapperEmpty from "@/components/app-wrapper-empty";
|
|
|
+import AppTabs from "@/components/plugin/tabs";
|
|
|
+import OrderItem from "./orderItem";
|
|
|
import { list } from "@/mixins";
|
|
|
+import AppWrapperEmpty from "@/components/app-wrapper-empty";
|
|
|
import { getList } from "@/api/order";
|
|
|
-import wangCg from "@/components/wangCg";
|
|
|
+import DateSelect from "@/components/module/dateSelect";
|
|
|
export default {
|
|
|
- name: "order-list",
|
|
|
components: {
|
|
|
- ListModule,
|
|
|
- wangCg,
|
|
|
- AppWrapperEmpty
|
|
|
+ AppWrapperEmpty,
|
|
|
+ OrderItem,
|
|
|
+ AppTabs,
|
|
|
+ DateSelect
|
|
|
},
|
|
|
mixins: [list],
|
|
|
- data() {
|
|
|
+ data () {
|
|
|
return {
|
|
|
- loginComeBack:0
|
|
|
- };
|
|
|
- },
|
|
|
- onPullDownRefresh() {
|
|
|
- this.resetList();
|
|
|
- this.getOrderList().then(res => {
|
|
|
- uni.stopPullDownRefresh();
|
|
|
- });
|
|
|
+ tabs: [
|
|
|
+ {
|
|
|
+ name: "全部",
|
|
|
+ value: 0,
|
|
|
+ key: '0'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "待付款",
|
|
|
+ value: 0,
|
|
|
+ key: '1'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "待发货",
|
|
|
+ value: 0,
|
|
|
+ key: '2'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "待收货",
|
|
|
+ value: 0,
|
|
|
+ key: '3'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "已完成",
|
|
|
+ value: 0,
|
|
|
+ key: '4'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ list: {
|
|
|
+ data: []
|
|
|
+ },
|
|
|
+ supplierList: [],
|
|
|
+ tabIndex: 0,
|
|
|
+ status: '0',
|
|
|
+ refreshPage:0,
|
|
|
+ searchContent:'',
|
|
|
+ searchTime:'',
|
|
|
+ startTime:'',
|
|
|
+ ghsId:0,
|
|
|
+ ghsName:''
|
|
|
+ }
|
|
|
},
|
|
|
- // 加载更多
|
|
|
- onReachBottom() {
|
|
|
- if (this.list.moreData == 1) {
|
|
|
- this.getOrderList().then(res => {
|
|
|
- uni.stopPullDownRefresh();
|
|
|
+ onReachBottom () {
|
|
|
+ if (!this.list.finished) {
|
|
|
+ this.getMyBuy().then(res => {
|
|
|
+ uni.stopPullDownRefresh()
|
|
|
});
|
|
|
} else {
|
|
|
- uni.stopPullDownRefresh();
|
|
|
+ uni.stopPullDownRefresh()
|
|
|
}
|
|
|
},
|
|
|
- computed: {
|
|
|
- ...mapGetters({ loginInfo:"getLoginInfo" })
|
|
|
- },
|
|
|
- watch: {
|
|
|
- loginInfo: {
|
|
|
- deep: true,
|
|
|
- handler: function(newVal) {
|
|
|
- if(!this.$util.isEmpty(newVal)){
|
|
|
- this.globalLoginStyle = 1
|
|
|
- }else{
|
|
|
- this.globalLoginStyle = 0
|
|
|
- }
|
|
|
- },
|
|
|
- immediate:true
|
|
|
- }
|
|
|
- },
|
|
|
- onLoad: function() {
|
|
|
-
|
|
|
+ onPullDownRefresh () {
|
|
|
+ this.resetList();
|
|
|
+ this.getMyBuy().then(res => {
|
|
|
+ uni.stopPullDownRefresh()
|
|
|
+ })
|
|
|
},
|
|
|
onShow(){
|
|
|
- if(this.loginComeBack == 1){
|
|
|
- this.init()
|
|
|
- this.loginComeBack = 0
|
|
|
+ if(this.refreshPage == 1){
|
|
|
+ this.resetList()
|
|
|
+ this.getMyBuy()
|
|
|
+ this.refreshPage = 0
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
- async init() {
|
|
|
- this.getOrderList();
|
|
|
+ selGhs(){
|
|
|
+ this.$util.pageTo({ url: "/pagesPurchase/selectGhs"})
|
|
|
},
|
|
|
- loginTo() {
|
|
|
- this.$util.pageTo({url:"/pages/login/index?needBack=1"})
|
|
|
- },
|
|
|
- getOrderList() {
|
|
|
- return getList({ status: this.tabIndex }).then(res => {
|
|
|
- this.completes(res);
|
|
|
- });
|
|
|
+ resetSearch(){
|
|
|
+ this.ghsId = 0
|
|
|
+ this.ghsName=''
|
|
|
+ this.searchTime = ''
|
|
|
+ this.startTime = ''
|
|
|
+ this.endTime = ''
|
|
|
+ this.resetList()
|
|
|
+ this.getMyBuy()
|
|
|
+ },
|
|
|
+ selectDateFn(val) {
|
|
|
+ this.searchTime = val.searchTime
|
|
|
+ this.startTime = val.startTime
|
|
|
+ this.endTime = val.endTime
|
|
|
+ this.resetList()
|
|
|
+ this.getMyBuy()
|
|
|
+ },
|
|
|
+ change(e) {
|
|
|
+ if (this.tabIndex != e.index) {
|
|
|
+ uni.pageScrollTo({
|
|
|
+ scrollTop: 0,
|
|
|
+ duration: 0
|
|
|
+ });
|
|
|
+ this.resetList();
|
|
|
+ this.list.finished = true;
|
|
|
+ this.tabIndex = e.index;
|
|
|
+ this.status = e.item.key;
|
|
|
+ this.getMyBuy().then(() => {
|
|
|
+ this.list.finished = false;
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ init() {
|
|
|
+ if(this.option.ghsId){
|
|
|
+ this.ghsId = this.option.ghsId?this.option.ghsId:0
|
|
|
+ this.ghsName = this.option.ghsName?this.option.ghsName:''
|
|
|
+ }
|
|
|
+ this.getMyBuy()
|
|
|
+ },
|
|
|
+ getMyBuy () {
|
|
|
+ return getList({ status: this.status,page: this.list.page,searchTime: this.searchTime,startTime: this.startTime,endTime: this.endTime,ghsId:this.ghsId}).then(res => {
|
|
|
+ this.completes(res)
|
|
|
+ if (this.$util.isEmpty(res.data)){
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ goToDetail (val) {
|
|
|
+ uni.navigateTo({ url: '/pages/order/detail?id=' + val.id })
|
|
|
}
|
|
|
}
|
|
|
-};
|
|
|
+}
|
|
|
</script>
|
|
|
+
|
|
|
<style lang="scss" scoped>
|
|
|
-.app-content {
|
|
|
- padding-top: 20upx;
|
|
|
- padding-bottom: 1upx;
|
|
|
- .list-wrap {
|
|
|
- padding: 0 30upx;
|
|
|
- background-color: #fff;
|
|
|
- margin-bottom: 20upx;
|
|
|
- .list-top,
|
|
|
- .list-bottom {
|
|
|
- padding: 20upx 0;
|
|
|
- border-bottom: 1upx solid $borderColor;
|
|
|
- .button-com {
|
|
|
- padding-top: 15upx;
|
|
|
- padding-bottom: 15upx;
|
|
|
+.order-page {
|
|
|
+ .tabs {
|
|
|
+ height: 80upx;
|
|
|
+ line-height: 80upx;
|
|
|
+ & > view {
|
|
|
+ // padding: 0 80upx;
|
|
|
+ width: 50%;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 28upx;
|
|
|
+ color: #666;
|
|
|
+ display: inline-block;
|
|
|
+ }
|
|
|
+ & > .active {
|
|
|
+ position: relative;
|
|
|
+ color: #3385ff;
|
|
|
+ font-weight: 700;
|
|
|
+ }
|
|
|
+ & > .active::after {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ width: 70upx;
|
|
|
+ height: 6upx;
|
|
|
+ background: #3385ff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .order_list {
|
|
|
+ // height: 200upx;
|
|
|
+ height: 100%;
|
|
|
+ background: #f0f2f6;
|
|
|
+ padding: 0 0 20upx;
|
|
|
+ .list_item {
|
|
|
+ margin: 20upx 0 0;
|
|
|
+ // padding-left: 20upx;
|
|
|
+ position: relative;
|
|
|
+ height: 180upx;
|
|
|
+ width: 100vw;
|
|
|
+ background: #fff;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ & > image {
|
|
|
+ margin-left: 30upx;
|
|
|
+ width: 120upx;
|
|
|
+ height: 120upx;
|
|
|
+ border-radius: 60upx;
|
|
|
+ }
|
|
|
+ & > .store_name {
|
|
|
+ margin-left: 30upx;
|
|
|
+ & > .store_title {
|
|
|
+ margin-bottom: 30upx;
|
|
|
+ font-size: 32upx;
|
|
|
+ font-weight: 700;
|
|
|
+ color: #333;
|
|
|
+ }
|
|
|
+ & > .accumulative {
|
|
|
+ font-size: 26upx;
|
|
|
+ color: #999;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ & > .store_btn {
|
|
|
+ position: absolute;
|
|
|
+ right: 30upx;
|
|
|
+ // padding-right: 30upx;
|
|
|
+ & > .btn_entrance {
|
|
|
+ display: inline-block;
|
|
|
+ font-size: 26upx;
|
|
|
+ color: #3385ff;
|
|
|
+ border: 1px solid #3385ff;
|
|
|
+ border-radius: 8upx;
|
|
|
+ padding: 15upx 30upx;
|
|
|
+ margin-left: 30upx;
|
|
|
+ }
|
|
|
+ & > .btn_forbid {
|
|
|
+ border: 1px solid #999;
|
|
|
+ color: #999;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+ .pay_list {
|
|
|
+ padding-top:20upx;
|
|
|
+ padding-bottom: 100upx;
|
|
|
+ background-color: #f0f2f6;
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
