H5_module/mine/order/order.vue

<template>
	<view :style="[mainStyle]">
		<!--pages/order/order.wxml-->
			<view class="tab">
				<view v-for="(item, index) in TabList" :key="index" :class="'li ' + (item.active ? 'active' : '')"
					:data-index="index" @tap="switchTab">{{ item.label }}</view>
			</view>
			<view style="height: 100rpx;"></view>
			<view class="search ddflex" v-if="index == 0">
				<image src="../../static/pages/images/ssico.png"></image>
				<input v-model="search" placeholder="输入关键词搜索" placeholder-class="placeholder" class="ipt fflex"
					@confirm="confirmSearch" />
			</view>
			<block v-if="pageList.length > 0">
				<view v-for="(item, index) in pageList" :key="index" class="lists" @tap="showOrder(item)">
					<view class="ddbh">
						<view class="ddid ddflex fflex ">
							{{ item.payTime ? item.payTime : item.createDate }} 下单
							<!-- <block v-if="item.state == 1 || item.state == 8">
						<image src="/mine/static/mine/images/ioc_hwg.png" class="ioc" v-if="item.orderType==10">
						</image>编号：{{item.id}}<text class="copy" @tap="copy(item.id)">复制</text>
						</block>
						<block v-else>{{item.payTime}} 下单</block> -->
						</view>
						<!-- //订单状态等于待自提；并且订单类型是需要核销的 -->
						<block
							v-if="item.state == 7 && (item.orderType == 17 || item.orderType == 18 || item.orderType == 16)">
						</block>
						<block v-else>
							<view class="tihuoma" v-if="item.mode == 1 && item.state < 8 && item.state > 1">
								提货码：
								<text>{{ item.code }}</text>
							</view>
						</block>
						<block>
							<image src="/static/pages/images/jishida.png" class="type" v-if="item.orderType == 5">
							</image>
							<image src="/mine/static/mine/images/tuangou.png" class="type" v-if="item.orderType == 2">
							</image>
							<image src="/mine/static/mine/images/pingtuan.png" class="type" v-if="item.orderType == 4">
							</image>
							<image src="/mine/static/mine/images/kanjia.png" class="type" v-if="item.orderType == 7">
							</image>
							<image src="/mine/static/mine/images/seckill.png" class="type" v-if="item.orderType == 3">
							</image>
							<image src="/mine/static/mine/images/newbornZone.png" class="type"
								v-if="item.orderType == 6">
							</image>
						</block>
					</view>
					<view :data-code="item.code" :data-id="item.id" :data-state="item.state">
						<view v-for="(itempro, index2) in item.products" :key="index2" class="li">
							<image :src="itempro.pic + '?x-oss-process=style/w160'" mode="aspectFill" class="cimg">
							</image>
							<view class="zhinfo">
								<view class="zhtit ddflex">
									<view class="fflex tover">{{ itempro.title }}</view>
									<view class="zhjia" v-if="item.orderType != 11">￥{{ itempro.salePrice }}</view>
									<view class="zhjia" v-if="item.orderType == 11">
										{{ itempro.integral }}积分+￥{{ itempro.salePrice }}
									</view>
								</view>
								<view class="gg ddflex">
									<view v-if="itempro.propertiesList" class="guigecontent fflex">
										<block v-if="itempro.propertiesList && itempro.propertiesList.length > 0">
											规格：
											<text v-for="(itemGuige, index) in itempro.propertiesList" :key="index"
												class="guige" decode="true">{{ itemGuige.value }}&nbsp;</text>
										</block>
									</view>
									<view class="num">×{{ itempro.quantity }}</view>
								</view>
								<view class="yuji" v-if="itempro.estimatedDeliveryTime">
									{{ itempro.estimatedDeliveryTimeStr }}前发货
								</view>
							</view>
						</view>
						<view class="total dflex">
							<!-- <view>共{{item.count}}件商品</view> -->
							<view v-if="item.orderType != 11">
								总金额：
								<text>￥{{ item.money }}</text>
							</view>
							<view v-if="item.orderType == 11">
								合计：
								<text>{{ item.discountMoney }}积分+￥{{ item.money }}</text>
							</view>
							<view v-if="item.discountMoney > 0 && item.orderType != 11">
								优惠金额：
								<text>￥{{ item.discountMoney }}</text>
							</view>
						</view>
					</view>
					<view class="status">
						<block v-if="item.mode == 1 && item.state == 3">
							<view class="flex">待配货</view>
						</block>
						<block v-else>
							<block v-if="item.state == 7 && item.orderType == 17">
								<view class="flex">订单完成</view>
							</block>
							<view v-else class="flex">{{ item.stateName }}</view>
						</block>
						<!-- <block v-if="item.orderType==4">

					</block>
					<block v-else>
						<view class="sta-btn" @tap="refund" :data-id="item.id" :data-index="index"
							v-if="item.refund>0&&item.state>=2&&item.state<=6 && isrefund==1&&(item.orderType!=4)&&item.payTime!=null ||(item.state >=20&&item.state <30&&item.isOtc=='1'&& isrefund==1&&item.payTime!=null)">
							申请售后</view>
					</block> -->
						<view class="sta-btn" @click.stop="cancelOrder" :data-index="index" v-if="item.state == 1">取消订单
						</view>
						<view class="sta-btn" @click.stop="jumpUrl('/service/secondCard/secondCard')"
							:data-index="index" v-if="item.state == 7 && item.orderType == 18">去使用</view>
						<!-- <view class="sta-btn" @tap="cancelOrder" :data-index="index" v-if="item.state == 3">提醒发货</view> -->
						<view class="sta-btn" @click.stop="txOrder" :data-index="index"
							v-if="item.state == 3 && item.isReminder == 1">提醒发货</view>
						<!-- <block
							v-if="isOpenInvoice == 1 && (item.state == 2 || item.state == 3 || item.state == 4 || item.state == 5 || item.state == 6 || item.state == 7)">
							<view class="sta-btn" @click.stop="applyInvoice(item)" v-if="item.invoiceState == 0">申请开票
							</view>
							<view class="sta-btn" @click.stop="toInvoice()" v-else>查看发票</view>
						</block> -->
						<!-- <navigator class="sta-btn" url="/mine/orderDet/orderDet?id={{item.id}}" hover-class="none">查看详情</navigator> -->
						<view class="sta-btn red" @click.stop="confirmOrder" :data-index="index"
							v-if="item.state == 5 || item.state == 6">确认收货</view>
						<view @click.stop="payOrder(item, index)" class="sta-btn red" v-if="item.state == 1">立即付款</view>
						<view @click.stop="scoreOrder" :data-index="index" class="sta-btn red"
							v-if="item.state == 7 && isOpenComments == 1 && item.isEvaluate == 0">立即评价</view>
						<navigator v-if="item.state == 22 || item.state == 20 || item.state == 27" hover-class="none"
							:url="'/prescription/Consultation/index?orderId=' + item.id" class="sta-btn red">
							重新开方
						</navigator>
					</view>
				</view>
			</block>
			<view class="nodata" v-if="ishow">
				<image :src="picUrlss + 'empty_dd.png'"></image>
				<text>还没有订单哦</text>
			</view>
		</view>
</template>

<script>
	// pages/order/order.js
	const app = getApp();
	const req = require('../../utils/request.js');
	const requsetmessage = require('../../utils/requestmessage.js');

	export default {
		data() {
			return {
				mainStyle: app.globalData.mainStyle,
				picUrlss: req.public.picUrls,
				systems: {},
				TabList: [{
					label: '全部',
					active: true
				}, {
					label: '待付款',
					state: 1
				}, {
					label: '待发货',
					state: 3
				}, {
					label: '待收货',
					state: 5
				}, {
					label: '已完成',
					state: 7
				}],
				form: {
					page: 1,
					limit: 10
				},
				pageList: [],
				isLoad: true,
				index: '',
				ishow: false,
				isrefund: '',
				isOpenComments: '',
				isOpenInvoice: '',
				search: '',
				payItem: '',
				isPay: false,
			};
		},

		components: {},
		props: {},
		beforeMount() {
			const systemInfo = uni.getSystemInfoSync();
			console.log('systemInfo==', systemInfo)
			// px转换到rpx的比例
			let pxToRpxScale = 750 / systemInfo.windowWidth;
			let systems = {
				ktxStatusHeight: systemInfo.statusBarHeight * pxToRpxScale, // 状态栏的高度
				navigationHeight: 44 * pxToRpxScale, // 导航栏的高度
				windowHeight: systemInfo.screenHeight * pxToRpxScale, // 导航栏的高度
				safeBottomHeight: systemInfo.safeAreaInsets.bottom * pxToRpxScale
			};
			systems.barHeight = systems.ktxStatusHeight + systems.navigationHeight;
			systems.windowHeights = systems.windowHeight - 115 - systems.safeBottomHeight;
			// this.sheight = (500/pxToRpxScale)/2;
			this.systems = systems;
			console.log('systems==', systems)
		},
		onLoad: function(options) {
			let that = this;
			let title = '';
			this.isrefundFun();
			this.isOpenCommentsFun();

			if (options.orderType) {
				this.form.orderType = options.orderType;
				if (options.orderType == 2) title = '团购订单';
				if (options.orderType == 4) title = '拼团订单';
				if (options.orderType == 7) title = '砍价订单';
				uni.setNavigationBarTitle({
					title: title
				});
			}

			const index = that.TabList.findIndex(it => it.state == options.state);
			if (options && options.state > 0)
				that.switchTab({
					currentTarget: {
						dataset: {
							index: index
						}
					}
				});
			else that.getList();
			this.setData({
				index: index
			});
		},

		onShow() {
			this.switchTab({
				currentTarget: {
					dataset: {
						index: this.index
					}
				}
			});

			// #ifdef H5
			if (this.payItem && this.isPay) {
				this.isPay = false;
				req.checkPaySuccess(this.payItem.id, sucs => {
					console.log('付款结果>>>>', sucs);
					this.payJumpSuc(this.payItem, sucs);
					this.payItem = '';
				});
			}
			// #endif
		},

		onReachBottom() {
			this.form.page++;
			this.getList();
		},

		methods: {
			switchTab(event) {
				let index = event.currentTarget.dataset.index;
				// console.log(index);
				let def = this.TabList.findIndex(it => it.active);
				let d = {};
				d['TabList[' + def + '].active'] = false;
				d['TabList[' + index + '].active'] = true;
				this.isLoad = true;
				this.form.page = 1;
				this.search = '';
				d['pageList'] = []; // this.data.form.states=this.data.TabList[index].state.toString();

				this.form.state = this.TabList[index].state;
				this.setData({
					index: index
				});
				this.setData(d);
				this.getList();
			},
			confirmSearch() {
				this.isLoad = true;
				this.form.page = 1;
				this.getList();
			},

			getList() {
				let isShowLoading = false;

				if (this.form.page == 1 && !isShowLoading) {
					req.loadIng('加载中');
					isShowLoading = true;
				}

				// console.log(!this.isLoad);
				if (!this.isLoad) return false;
				this.isLoad = false;
				let that = this;
				let form = this.form;
				if (this.search) {
					form.search = this.search;
				} else {
					delete form.search;
				}
				req.getRequest('/api/order/list', form, data => {
					// console.log(data);
					if (data && data.length == 10) this.isLoad = true;
					if (that.form.page > 1) data = that.pageList.concat(data);
					data.map(el => {
						el.refund = el.products.filter(it => it.quantity - (it.refundStock ? it
							.refundStock : 0) > 0).length;
						return el;
					});
					// console.log(data)
					that.setData({
						pageList: data
					});

					// console.log(data);

					if (data.length <= 0) {
						that.setData({
							ishow: true
						});
					} else {
						that.setData({
							ishow: false
						});
					}

					if (isShowLoading) {
						uni.hideLoading();
						isShowLoading = false;
					}
				});
			},

			showOrder(item) {
				let id = item.id;
				let code = item.code;
				let state = item.state;
				if (item.state == 7 && item.orderType == 17) { //17 虚拟产品订单 18 线下服务
					//进入核销订单详情页面
					app.globalData.openPage('service/virtuallyDetail/index?id=' + item.id);
				} else {
					//进入常规订单详情
					app.globalData.openPage('mine/orderDet/orderDet?id=' + id + '&isrefund=' + this.isrefund + '&code=' +
						code);
				}
			},

			txOrder(event) {
				let index = event.currentTarget.dataset.index;
				let page = this.pageList[index];
				let that = this;
				req.postRequest(
					'/api/order/reminderOrder', {
						orderId: page.id
					},
					() => {
						req.msg('发货提醒成功');
					}
				);
			},

			cancelOrder(event) {
				//取消订单
				let index = event.currentTarget.dataset.index;
				let page = this.pageList[index];
				let that = this;
				req.msgConfirm('确定取消该订单？', () => {
					req.postRequest(
						'/api/order/cancel', {
							id: page.id
						},
						() => {
							let d = {};
							d['pageList[' + index + '].stateName'] = '订单取消';
							d['pageList[' + index + '].state'] = 8;
							that.setData(d);
							that.switchTab({
								currentTarget: {
									dataset: {
										index: this.index
									}
								}
							});
						}
					);
				});
			},

			confirmOrder(event) {
				//确认收货
				let index = event.currentTarget.dataset.index;
				let page = this.pageList[index];
				let that = this;
				// console.log(that.index);
				req.msgConfirm('确认执行该操作？', () => {
					req.postRequest(
						'/api/order/receiving', {
							id: page.id
						},
						() => {
							let d = {};
							d['pageList[' + index + '].stateName'] = '订单完成';
							d['pageList[' + index + '].state'] = 7;
							that.setData(d);
							that.switchTab({
								currentTarget: {
									dataset: {
										index: this.index
									}
								}
							});
						}
					);
				});
			},

			payOrder: async function(item) {
				let _ts = this;
				_ts.isPay = true;
				let mode = item.mode;
				if (item.mode == 2 && item.orderType == 5) {
					mode = 3;
				}
				_ts.payItem = item;
				// #ifdef MP-WEIXIN
				if (item.isOtc == 1) {
					await requsetmessage.recipel(mode).then(res => {});
				} else if (mode == 1) {
					await requsetmessage.selfRaising().then(res => {
						// console.log("自提", res);
					});
				} else if (mode == 2) {
					await requsetmessage.distribution().then(res => {
						// console.log("配送", res);
					});
				} else {
					await requsetmessage.jisda().then(res => {
						// console.log("及时达", res);
					});
				}
				// #endif
				//支付订单
				req.payOrder(item.id, success => {
					// console.log(success);
					_ts.payJumpSuc(item, success);

				});
			},

			payJumpSuc(sucs) {
				this.orderId = '';
				if (sucs) {
					if (item.isOtc == 1) {
						app.globalData.redirectTab('product/pay/pay?isSuccess=true&orderId=' + item.id +
							'&isRx=1');
					} else {
						app.globalData.redirectTab('product/pay/pay?isSuccess=true');
					}
				}
			},

			refund(event) {
				//申请退款
				let id = event.currentTarget.dataset.id;
				uni.navigateTo({
					url: '/mine/refund/refundType/refundType?id=' + id
				}); // let id = event.currentTarget.dataset.id;
				// req.postRequest('/api/order/refund',{id:id},res=>{
				//   req.msg('退款审核中')
				// })
			},

			isrefundFun() {
				//是否开启售后
				let isrefund = JSON.parse(req.getStorage('configRes'));

				if (isrefund.isRefund) {
					this.setData({
						isrefund: isrefund.isRefund
					});
				} // if(isrefund.isRefund==1){
				//   req.getRequest('/api/orderRefund/refundReason','',data=>{
				//     req.setStorage('isrefund',data)
				//   })
				// }
			},

			isOpenCommentsFun() {
				//是否开启评论
				let isOpenComments = JSON.parse(req.getStorage('configRes'));

				if (isOpenComments.is_open_comments) {
					this.setData({
						isOpenComments: isOpenComments.is_open_comments
					});
				}
				if (isOpenComments.is_open_invoice) {
					this.setData({
						isOpenInvoice: isOpenComments.is_open_invoice
					});
				}
			},

			scoreOrder(event) {
				//评价订单
				let index = event.currentTarget.dataset.index;
				let page = this.pageList[index];
				let that = this;
				app.globalData.openPage('mine/comments/comments?id=' + page.id);
			},
			copy(id) {
				uni.setClipboardData({
					data: id,
					complete() {
						req.msg('复制成功');
					}
				});
			},
			// 申请开票
			applyInvoice(item) {
				uni.navigateTo({
					url: '/invoice/apply/apply?orderId=' + item.id + '&money=' + item.money
				});
			},
			toInvoice() {
				uni.navigateTo({
					url: '/mine/invoice/invoice'
				});
			},
			jumpUrl(url) {
				uni.navigateTo({
					url: url
				})
			}
			//订单类型
			//普通订单 1, 社区团购订单 2,秒杀订单 3, 拼团订单 4,及时达订单 5,新客特价 6,优惠砍价 7, 海外购订单 10,积分订单 11,组合订单 12,代客下单 13,收银台下单 14,处方订单 15,门店消费订单 16,虚拟订单 17,服务订单 18,混合订单 20,自助开团-齐育未来 21,分次付款订单-齐育未来 22,团购订单-蜜团团 23,优惠券-虚拟品订单 24,挂号 47,课程组 48,课程 49,众筹订单 86,捐款记录 87,回收订单 88,门店收款订单 89,分批付款订单 90,试卷订单 91,充值订单 92,收款订单 93,预约订单 94,VIP购买订单 96,平台功能订单 97,加入协会 98,赛事订单 99
		}
	};
</script>
<style>
	@import './order.css';
</style>