jianbing/components/order-list/order-list.vue

<template>
	<mescroll-uni ref="mescroll" top="100rpx" @init="mescrollInit" @down="downCallback" :down="downOption" :up="upOption" @up="upCallback">
		<view class="u-p-20">
			<navigator class="bg-white br16 px20 u-m-b-24 u-p-b-20" hover-class="none"
				v-for="(item, index) in orderList"
				:key="index"
				:url="'/pages/order_details/order_details?id=' + item.id">
				<order-goods :list="item.orderGoods" :order_type="item.order_type" :imageRadius="12"
					:orderDesc="item.order_status_desc" :orderStatus="item.order_status"></order-goods>
				<view class="u-m-t-26 u-m-b-26 u-p-l-20 u-p-r-20">
					<u-line color="#EEE" />
				</view>
				<view class="u-m-t-26 row-between u-p-l-20 u-p-r-20">
					<view class="primary flex1">
						<view v-if="getCancelTime(item.order_cancel_time) > 0">
							<u-count-down separator="zh" :timestamp="getCancelTime(item.order_cancel_time)"
								separator-color="#FF2C3C" color="#FF2C3C" :separator-size="26" :font-size="26"
								bg-color="transparent" @end="orderRefresh"></u-count-down>
						</view>
						<!-- 这边还缺一个未制作等待的时间 -->
						<view class="primary" v-if="type === 'finish'">
							存餐格号:15号
						</view>
					</view>
					<view class="row">
						<view class="u-m-r-16" v-if="item.cancel_btn">
							<u-button @click="cancelOrder(item.id)" hover-class="none"
								:customStyle="{ width: '164rpx', height: '60rpx', color: '#999', border: '1px solid #DDD' }"
								:plain="true" :hair-line="false" shape="circle">取消订单</u-button>
						</view>
						<view v-if="item.pay_btn">
							<u-button @click="payNow(item.id)" hover-class="none"
								:customStyle="{ width: '164rpx', height: '60rpx', backgroundColor: themeColor, color: '#fff', border: 'none' }"
								:hair-line="false" shape="circle">去付款</u-button>
						</view>
						<view v-if="item.order_status > 0 && item.order_status < 4">
							<u-button @click.stop="seeDetails(item.id)" hover-class="none" :customStyle="{width: '164rpx', height: '60rpx', backgroundColor: themeColor, color: '#fff', border: 'none'}" :hair-line="false" shape="circle">查看详情</u-button>
						</view>
						<view v-if="item.order_status == 4 && ( type == 'delivery' || type == 'finish')">
							<u-button @click.stop="toRefund(item.id, item.order_goods)" hover-class="none" :customStyle="{width: '164rpx', height: '60rpx', backgroundColor: themeColor, color: '#fff', border: 'none'}" :hair-line="false" shape="circle">申请退款</u-button>
						</view>
					</view>
				</view>
			</navigator>
        	<order-dialog ref="orderDialog" :order-id="orderId" :type="orderType" @refresh="reflesh"></order-dialog>
		</view>
	</mescroll-uni>
</template>

<script>
import {
	getOrderList,
	cancelOrder,
	delOrder,
	confirmOrder,
	completeAudit
} from '@/api/order'
import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js"

export default {
	name: 'order-list',
	mixins: [MescrollMixin],
	props: {
		type: {
			type: String,
			default: 'all'
		}
	},
	data() {
		return {
			orderList: [],
			downOption: {
				auto: false 
			},
			upOption: {
				noMoreSize: 4,
				empty: {
					tip: '~ 空空如也 ~', // 提示
					btnText: '',
					fixed: true
				},
				textNoMore: '没有更多了'
			},
            orderId: "",
            pay_way: "",
			showCancel: false,
			orderType: 0
		}
	},
	created() {
		uni.$on("refreshorder", () => {
            this.reflesh();
        });
        uni.$on("payment", (params) => {
            if (params.result) {
                this.reflesh();
                uni.navigateBack();
                setTimeout(() => this.$toast({ title: "支付成功" }), 0.5 * 1000);
            }
        });
	},
	destroyed: function () {
        uni.$off(["payment", "refreshorder"]);
    },
	methods: {
		// 初始化数据
		upCallback(page) {
			let pageNum = page.num // 页码, 默认从1开始
			let pageSize = page.size // 页长, 默认每页10条
			let { type } = this
			getOrderList({
				page_size: pageSize,
				page_no: pageNum,
				type
			}).then(({
				data
			}) => {
				let curPageData = data.list;
				let curPageLen = curPageData.length;
				let hasNext = !!data.more;
				if (page.num == 1) this.orderList = [];
				this.orderList = this.orderList.concat(curPageData);
				this.mescroll.endSuccess(curPageLen, hasNext);
			})
		},

		orderRefresh() {
			this.mescroll.resetUpScroll()
		},

		cancelOrder(id) {
            this.orderId = id;
            this.orderType = 0;
            this.$nextTick(() => {
                this.orderDialog();
            });
        },

        payNow(id) {
            uni.navigateTo({
                url: `/pages/payment/payment?from=${"order"}&order_id=${id}`,
            });
        },

		reflesh() {
			this.mescroll.resetUpScroll()
        },

		orderDialog() {
			this.$refs.orderDialog.open();
        },

		// 查看详情
		seeDetails(id) {
			uni.navigateTo({
				url: `/pages/order_details/order_details?id=${id}`
			})
		},

		// 申请退款
		toRefund(id, goods) {
			if (goods.length == 1) {
				uni.navigateTo({
					url: `/bundle/pages/apply_refund/apply_refund?order_id=${goods[0].order_id}&item_id=${goods[0].item_id}`
				})
			} else {
				uni.navigateTo({
					url: `/pages/order_details/order_details?id=${id}`
				})
			}
		}
	},
    computed: {
        getCancelTime() {
            return (time) => time - Date.now() / 1000;
        },
    },

	watch: {
		type() {
			this.mescroll.resetUpScroll()
		}
	}
}
</script>

<style lang="scss">
</style>