zx_bms_uni/pages/orderlist/orderlist.vue

<template>
	<view class="container">
		<view class="main-container">
			<view class="nav-tab flex-row flex-between">
				<view class="order-type-container flex-row flex-start">
					<view :class="'nav-item ' + (navSelected == 1 ? 'nav-active' : '')" @tap="bindSelectNavTab"
						data-nav="1">{{$t('待确认')}}</view>
					<view :class="'nav-item ' + (navSelected == 2 ? 'nav-active' : '')" @tap="bindSelectNavTab"
						data-nav="2">{{$t('支付成功')}}</view>
					<view :class="'nav-item ' + (navSelected == 3 ? 'nav-active' : '')" @tap="bindSelectNavTab"
						data-nav="3">{{$t('全部')}}</view>
				</view>
				<view class="search-btn" style="margin-right: 20px" @tap="navigatorToPage"
					data-page="/myPages/pages/searchOrder/searchOrder">
					<image style="width: 19px; height: 19px" src="/static/resource/images/search-i.png"></image>
				</view>
			</view>

			<view class="list-group">
				<view class="list-item" v-for="(item, index) in orderList" :key="index">
					<view class="list-item-head flex-row flex-between">
						<view class="order-time">{{ item.ctime }}</view>
						<view class="order-status">
							<text v-if="item.pay_type == 1 && item.status == 0"
								class="i-status to-check">{{$t('线下-待确认')}}</text>
							<text v-if="item.pay_type == 1 && item.status == 1"
								class="i-status to-pay-ok">{{$t('线下-支付成功')}}</text>
							<text v-if="item.pay_type == 0 && item.status == 1"
								class="i-status to-pay-ok">{{$t('微信-支付成功')}}</text>
						</view>
					</view>

					<view class="list-item-body">
						<view class="form-item flex-row flex-between">
							<view class="form-label">{{$t('门店')}}</view>
							<view class="form-value">{{ item.shop_name }}</view>
						</view>
						<view class="form-item flex-row flex-between">
							<view class="form-label">{{$t('电池编号')}}</view>
							<view class="form-value" @tap="handleClipboard" :data-clipdata="item.battery_sn">
								{{ item.battery_sn }}
								<image src="/static/resource/images/clip.png"
									style="width: 10px; height: 10px; margin-left: 5px"></image>
							</view>
						</view>
						<view class="form-item flex-row flex-between">
							<view class="form-label">单价</view>
							<view class="form-value">
								<text>{{ item.hire_price / 100 + $t('元')}}/</text>
								<text v-if="item.hire_duration_unit == 1">{{$t('天')}}</text>
								<text v-else-if="item.hire_duration_unit == 2">{{$t('月')}}</text>
								<text v-else-if="item.hire_duration_unit == 3">{{$t('年')}}</text>
							</view>
						</view>
						<view class="form-item flex-row flex-between">
							<view class="form-label">{{$t('租赁用户')}}</view>
							<view class="form-value">{{ item.user_name }} {{ item.phone }}</view>
						</view>
						<view class="form-item flex-row flex-between">
							<view class="form-label">{{$t('租赁时长')}}</view>
							<view class="form-value">
								<text>{{ item.hire_duration }}</text>
								<text v-if="item.hire_duration_unit == 1">{{$t('天')}}</text>
								<text v-else-if="item.hire_duration_unit == 2">{{$t('月')}}</text>
								<text v-else-if="item.hire_duration_unit == 3">{{$t('年')}}</text>
							</view>
						</view>
						<view class="form-item flex-row flex-between">
							<view class="form-label">{{$t('应付金额')}}</view>
							<view class="form-value pay-money">{{ item.money / 100 }}元</view>
						</view>
					</view>

					<view v-if="item.pay_type == 1 && item.status == 0" class="list-item-footer flex-row flex-end">
						<view class="op-btn" @tap="bindCheckPay" :data-ordersn="item.order_sn" :data-idx="index">
							{{$t('确认支付')}}</view>
					</view>
				</view>
			</view>

			<no-more :is-loading="isLoading" />
		</view>
	</view>
</template>

<script>
	import noMore from '@/component/nomore/nomore';
	// pages/orderlist/orderlist.js
	var config = require('../../common/config.js');
	var http = require('../../common/http.js');
	var common = require('../../common/common.js');
	var storage = require('../../common/storage.js');
	export default {
		components: {
			noMore
		},
		data() {
			return {
				navSelected: 1,
				start_page: 1,
				limit_page: 10,
				orderList: [],
				isLoading: false
			};
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			uni.setNavigationBarTitle({
				title: this.$t('订单列表')
			});
			this.refreshOrderList();
		},
		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function() {
			uni.setNavigationBarTitle({
				title: this.$t('订单列表')
			});
		},
		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage: function() {},
		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh: function() {
			this.refreshOrderList();
		},
		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function() {
			this.setData({
				isLoading: true
			});
			this.start_page++;
			this.loadOrderList();
		},
		methods: {
			bindSelectNavTab: function(e) {
				const navSelected = e.currentTarget.dataset.nav || 1;
				this.setData({
					navSelected: navSelected,
					start_page: 1,
					orderList: []
				});
				this.loadOrderList();
			},

			refreshOrderList() {
				this.setData({
					start_page: 1,
					orderList: []
				});
				this.loadOrderList();
			},

			loadOrderList: function() {
				const pData = {
					page: this.start_page,
					limit: this.limit_page,
					order_status: this.navSelected
				};
				const that = this;
				common.loading(this);
				http.postApi(config.API_ORDER_CHILDREN_LIST, pData, function(resp) {
					uni.hideLoading();
					uni.stopPullDownRefresh();
					if (resp.data.code === 200) {
						let orderList = that.orderList;
						orderList.push.apply(orderList, resp.data.data.list);
						that.setData({
							orderList: orderList,
							isLoading: false
						});
					} else {
						common.simpleToast(that, resp.data.msg);
					}
				});
			},

			bindCheckPay: function(e) {
				const idx = e.currentTarget.dataset.idx;
				const order_sn = e.currentTarget.dataset.ordersn;
				const orderInfo = this.orderList[idx];
				if (!orderInfo) {
					common.simpleToast(this, '订单错误');
					return;
				}
				if (orderInfo.pay_type != 1 || orderInfo.status != 0) {
					common.simpleToast(this, '该订单不是线下支付订单');
					return;
				}
				const that = this;
				uni.showModal({
					title: this.$t('提示'),
					content: this.$t('请确定该用户已线下支付'),
					showCancel: true,
					cancelText: this.$t('取消'),
					cancelColor: '',
					confirmText: this.$t('确定'),
					confirmColor: '',
					success: function(res) {
						if (res.confirm) {
							const pData = {
								order_sn: order_sn,
								idx: idx
							};
							http.postApi(config.API_ORDER_PAY_SUCCESS, pData, function(resp) {
								if (resp.data.code === 200) {
									that.refreshOrderList();
								} else {
									common.simpleToast(that, resp.data.msg);
								}
							});
						}
					},
					fail: function(res) {},
					complete: function(res) {}
				});
			},

			handleClipboard(e) {
				const clipdata = e.currentTarget.dataset.clipdata;
				uni.setClipboardData({
					data: clipdata
				});
			},

			navigatorToPage: function(e) {
				const page = e.currentTarget.dataset.page;
				if (!page) {
					return;
				}
				uni.navigateTo({
					url: page
				});
			}
		}
	};
</script>
<style>
	@import './orderlist.css';
</style>