web-app-v1/pages/my-order/my-order.vue

<template>
	<view class="my-order">
		<custom-nav noback="noback" transparent="transparent" ref="ltm" title=" " />
		<view class="content">
<!-- 			<view class="topt">
				<view class="search_con">
					<view class="search_inp">
						<view class="flex">
							<image src="../../static/icon/search.png" mode="widthFix"
								style="width: 48rpx;margin-right: 10rpx;"></image>
							<input type="text" placeholder="输入订单号" style="width: 370rpx;" />
						</view>
						<view class="search">查询</view>
					</view>
				</view>
			</view> -->
			<view class="SwiperNav">
				<view v-for="(item, index) in typeList" :key="index" @click="orderParams.status = index"  :class="orderParams.status === index ? 'red' : ''"
					style="display: flex;align-items: center;flex-direction: column;">
					{{ item }}
					<view :class="orderParams.status === index ? 'active' : ''"
						style="width: 42rpx; height: 8rpx;margin-top:3rpx; border-radius:4rpx;"></view>
				</view>
			</view>
			<scroll-view class="OrderList" scroll-y="true" @scrolltolower="addOrderList">
				<template v-if="orderList.length > 0">
					<view v-for="item in orderList" :key="item.id" @click="toDetail(item)" class="OrderList-item"
						:class="item.is_deleted ? 'OrderList-cancel' : ''">
						<image v-if="item.is_deleted" src="../../static/icon/cancel.png" mode="widthFix"
							class="item-cancel-img"></image>
						<image v-if="!item.is_deleted && item.apply_status == 1"
							src="../../static/new_order/daishen_biao.png" mode="widthFix" class="item-cancel-img">
						</image>
						<view class="item-header">
							<!-- <view class="item-header-copy" @click.stop="copyOrderNum(item.order_num)">复制</view> -->
							<view class="grey">订单号:{{ item.order_num }}</view>
							<view class="spec" v-if="item.apply_status == 0 && item.is_deleted == false">
								{{ item | orderStatus }}
							</view>
						</view>
						<view class="item-body">
							<view class="item-body-name grey">{{ item.address.username.slice(0,6) }}</view>
							<view class="item-body-phone">{{ item.address.mobile }}</view>
							<view class="item-body-address">
								<view class="address-text grey">
									{{ `${item.address.province}${item.address.city}${ item.address.town }${ item.address.address }` }}
								</view>
								<image class="address-arrow" src="../../static/icon/arrow.png"></image>
							</view>
							<view class="flex">
								<view class="hebing" @click.stop="goDetail(item.id)" v-if="item.is_merge === 1">
									合并
								</view>
								<view></view>
								<view style="display: flex;">
									<view class="gray">{{ item.type }}类；共{{ item.total }}件，</view>
									<view :class="item.is_deleted? 'gray':''">合计：</view>
									<view :class="item.is_deleted? 'gray':'pai_red'">￥{{ item.money }}</view>
								</view>
							</view>
							<!-- <view class="yellow">
								作废订单的申请已被拒绝
							</view> -->
						</view>
						<view class="item-footer">
							<view class="item-footer-time grey">
								{{ item.created_at | dateFormatter('yyyy-MM-dd hh:mm') }}
							</view>
							<view class="anniugray"
								v-if="item.status == 0 && item.apply_status == 0 && item.is_deleted == false && item.destroy_status != 2"
								@click.stop="showCancel = true; destroy_cause = ''; order_num = item.order_num ">
								作废订单
							</view>
							<view v-if="item.status == 3 || item.status == 4" class="item-footer-btn"
								@click.stop="toGoodsInfo(item)">
								发货详情
							</view>
							<view v-if="!item.is_deleted && item.pay_status && item.status == 4" class="item-footer-btn"
								@click.stop="buyAgain(item)">
								再次购买
							</view>
							<view v-if="!item.is_deleted && item.pay_status && item.status == 3" class="item-footer-btn"
								@click.stop="received(item)">
								确认收货
							</view>
						</view>
					</view>
				</template>
				<view v-else class="noTips">暂无订单</view>
			</scroll-view>
		</view>
		<u-popup v-model="showCancel" mode="bottom" height="700rpx;">
			<view class="popBox">
				<view class="popBox_title">
					作废订单原因
				</view>
				<view class="">
					<radio-group @change="radioChange">
						<label v-for="(item, index) in cancelCause" :key="item.value">
							<view class="uni-list" :class="index == 3 ?  '':'border'">
								<view>{{item.name}}</view>
								<view>
									<radio :value="item.value" :checked="index === current" color="#FF232C" />
								</view>
							</view>
							<view v-if="index == 3" class="input">
								<textarea v-model="destroy_cause" placeholder="请输入您作废的原因"
									placeholder-style="color: #CCCCCC" style="height: 150rpx;" />
							</view>
						</label>
					</radio-group>
				</view>
			</view>
			<view class="popBox_btn">
				<view class="btn qu" @click="destroy_cause = '';showCancel = false">
					取消作废
				</view>
				<view class="btn submit" @click="$noMultipleClicks(commitWork)">
					确定作废
				</view>
			</view>
		</u-popup>
	</view>
</template>
<script>
	import {
		_API_GoodList
	} from '@/apis/good.js'
	import {
		deepClone
	} from '@/common/util/index.js'
	import {
		_API_OrderDel,
		_API_OrderDetail1,
		_API_OrderCancel,
		_API_OrderReceiveGoods1,
		getOrderList,
		_API_destory
	} from '@/apis/order.js'
	import "@/common/util/ican-H5Api"
	export default {
		data() {
			return {
				lists: {
					0: [],
					1: [],
					2: [],
					3: [],
					4: {}
				}, // 数据
				typeList: ['全部', '未付款', '审核中'],
				orderParams: {
					status: 0,
					page: 1
				},
				current: 0,
				order_num: '',
				destroy_cause: '',
				showCancel: false, // 作废弹窗
				noClick: true,
				cancelCause: [{
						value: '0',
						name: '收货信息错了'
					},
					{
						value: '1',
						name: '尺码或数量错了'
					},
					{
						value: '2',
						name: '订单下多了'
					},
					{
						value: '3',
						name: '其他原因'
					},
				],
				orderList: [],
				orderTotal: 0
			}
		},
		filters: {
			orderStatus(orderItem) { // 计算订单总金额过滤器
				if (orderItem.is_deleted) {
					return '已作废'
				} else if (!orderItem.pay_status) {
					return '待支付'
				} else if (orderItem.status == 3) {
					return '待收货'
				} else if (orderItem.status == 4) {
					return '已完成'
				} else if (orderItem.status == 0) {
					return '订单审核中'
				} else if (orderItem.status == 1) {
					return '财务审核中'
				} else if (orderItem.status == 2) {
					return '发货审核中'
				} else {
					return '待审核'
				}
			},
			orderStatusClass(status) {
				if (status == '已完成') {
					return ''
				} else {
					return 'basecolor'
				}
			},
			maxNickname(str) {
				if (!str) return ""
				return `${str.substr(0,4)}${str.length > 4 ? '...' : ''}`
			}
		},
		watch: {
			'orderParams.status'() {
				this.orderParams.page = 1
				this.getOrderList()
			}
		},
		onLoad(opt) {
			if (this.$store.state.userinfo.user_type !== 3) {
				uni.navigateBack()
				setTimeout(() => uni.$emit('noopening'))
				return
			}
			if (opt.type) {
				this.orderParams.status = Number(opt.type)
			}
			this.getOrderList()
		},
		onPullDownRefresh() {
			this.orderParams.page = 1
			this.getOrderList()
		},
		methods: {
			// 作废订单提交
			commitWork() {
				let that = this
				if (that.current != 3) {
					that.reject_cause = that.cancelCause[that.current].name
				} else {
					if (that.destroy_cause == '') {
						uni.showToast({
							title: '请输入作废原因',
							icon: 'none'
						})
						return false;
					} else {
						that.reject_cause = that.destroy_cause
					}
				}
				const data = {
					order_num: that.order_num,
					destroy_cause: that.reject_cause
				}
				console.log(data)
				_API_destory(data).then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: '作废成功',
							icon: 'none'
						})
						this.showCancel = false
						that.getOrderList()
					} else {
						uni.showToast({
							title: res.message || '作废失败',
							icon: 'none'
						})
					}
				})
			},
			// 选择作废原因
			radioChange(e) {
				console.log(e.detail.value)
				this.current = e.detail.value
				if (this.current != 3) {
					this.destroy_cause = ''
				}
			},
			goDetail(id) {
				uni.navigateTo({
					url: './order-detail?id=' + id
				})
			},
			// 发货详情
			toGoodsInfo(data) {
				if (!data.track_status) {
					uni.showModal({
						content: "该订单尚未发货,暂不能查看详情",
						showCancel: false
					})
					return false
				}
				uni.navigateTo({
					url: "../lading_detail/index?data=" + encodeURIComponent(JSON.stringify(data))
				})
				// uni.navigateTo({
				// 	url: "../stock/dai_ruku?order_id="+data.order_id
				// })
			},
			addOrderList() {
				if (this.orderParams.page * 15 > this.orderTotal) {
					return false
				}
				this.orderParams.page += 1
				this.getOrderList()
			},
			showTime(time) {
				let _d = new Date(time)
				return `${_d.getFullYear()}/${_d.getMonth() + 1 > 10 ? _d.getMonth() + 1 : '0'+_d.getMonth() + 1}/${_d.getDay() > 10 ? _d.getDay() : '0'+_d.getDay()}`
			},
			getOrderList() {
				getOrderList(this.navSelect, this.orderParams).then(res => {
					uni.stopPullDownRefresh()
					if (res.code === 200) {
						if (this.orderParams.page === 1) {
							this.orderList = []
						}
						this.orderList = [...this.orderList, ...res.data.list]
						this.orderTotal = res.data.total
					}
				}).catch(() => {
					uni.stopPullDownRefresh()
				})
			},
			// 复制订单号
			copyOrderNum(order_num) {
				try {
					uni.setClipboardData({
						data: order_num,
						success: () => {
							uni.showModal({
								content: '订单号已复制',
								showCancel: false
							})
						}
					})
				} catch (e) {
					uni.showModal({
						content: '您的手机暂不支持复制',
						showCancel: false
					})
				}
			},
			confirmReceive(order_num, index) { // 点击确认收货
				this.$refs.ltm.modal('提示', ['确定收到商品？']).then(() => {
					uni.showLoading({
						mask: true
					})
					_API_OrderReceiveGoods({
						order_num
					}).then(res => {
						if (res.code === 200) {
							const list1 = deepClone(this.lists[1])
							list1.splice(index, 1) // 把当前订单从待收货列表删除
							this.$set(this.lists, 1, list1)
							uni.toast('收货成功')
						} else {
							uni.toast('收货失败，请稍后重试')
						}
					})
				}).catch(() => {
					uni.toast('取消确认')
				})
			},
			toDetail(goodItem) { // 点击查看订单
				const {
					order_num,
					order_id,
					is_deleted,
					pay_status,
					money,
					created_at,
					is_merge,
					total,
					status,
					apply_status,
					destroy_status
				} = goodItem
				let str = ''
				if (!is_deleted && !pay_status) {
					str = '&nopay=1'
				}
				const URL = encodeURIComponent(JSON.stringify(goodItem)).replace(/%/g, '%25')
				uni.navigateTo({
					url: '../order-detail1/order-detail1?item=' + URL
				})
			},
			changeOrder({
				order_num
			}) { // 取消订单
				uni.showModal({
					title: '',
					content: '修改订单后会作废此订单，然后复制此订单的商品到购物车中重新下单，确定作废？',
					success: (res) => {
						if (res.confirm) {
							uni.loading()
							_API_OrderCancel({
								order_num
							}).then(({
								code,
								message
							}) => {
								if (code != 200) {
									uni.toast(message)
								} else {
									uni.loading()
									_API_GoodList().then(({
										data: {
											list: list1
										}
									}) => {
										uni.loading()
										list1.forEach(e => e.cart = Array(e.size.length).fill(
											0))
										_API_OrderDetail1({
											order_num
										}).then(({
											data: {
												list: list2
											}
										}) => {
											uni.loading()
											this.$store.commit('cart/CLEAR')
											list1.forEach((item, index) => {
												const findRes = list2.find(e =>
													e.attr_id == item
													.attr_id)
												if (findRes) {
													findRes.size.forEach((size,
														sizeIndex) => {
														const
															goodItemSizeIndex =
															list1[
																index]
															.size
															.findIndex(
																e =>
																e ===
																size)
														list1[index]
															.cart[
																goodItemSizeIndex
															] =
															findRes
															.num[
																sizeIndex
															]
													})
													item.choosed = true
													item.sizeChoosed = Array(
															item.size.length)
														.fill(true)
													this.$store.commit(
														'cart/ADD', item)
													uni.navigateTo({
														url: '../shop-car1/shop-car1'
													})
												}
											})
										})
									})
								}
							})
						}
					}
				})
			},
			buyAgain({
				order_num
			}) { // 点击再次购买
				uni.showModal({
					title: '提示',
					content: '确定要再次购买？',
					success: (res) => {
						if (res.confirm) {
							uni.loading()
							_API_GoodList().then(({
								data: {
									list: list1
								}
							}) => {
								uni.loading()
								list1.forEach(e => e.cart = Array(e.size.length).fill(0))
								_API_OrderDetail1({
									order_num
								}).then(({
									data: {
										list: list2
									}
								}) => {
									this.$store.commit('cart/CLEAR')
									let waitPustCart = []
									list1.forEach((item, index) => {
										const findRes = list2.find(e => e.attr_id ==
											item.attr_id)
										if (findRes) {
											findRes.size.forEach((size, sizeIndex) => {
												const goodItemSizeIndex =
													list1[index].size
													.findIndex(e => e === size)
												list1[index].cart[
														goodItemSizeIndex] =
													findRes.num[sizeIndex]
											})
											item.choosed = true
											item.sizeChoosed = Array(item.size.length)
												.fill(true)
											item.storage.forEach((num, i) => {
												if (num <= 0) {
													item.cart[i] = 0
												}
											})
											if (item.cart.filter(n => n !== 0)
												.length !== 0) {
												waitPustCart.push(item)
											}
										}
									})
									if (waitPustCart.length > 0) {
										waitPustCart.forEach(item => {
											this.$store.commit('cart/ADD', item)
										})

										uni.navigateTo({
											url: '../shop-car1/shop-car1'
										})
									} else {
										uni.showModal({
											content: '该订单商品库存均不足,不能再次下单',
											showCancel: false
										})
									}
								})
							})
						}
					}
				})
			},
			// 物流查询
			logisticsQuery(item) {
				let {
					track_status,
					order_num
				} = item
				if (track_status === 0) {
					uni.showModal({
						content: '物流信息不存在',
						showCancel: false
					});
					return false
				}
				uni.navigateTo({
					url: `../logistics-info/logistics-info?order_no=${order_num}&status=${track_status}`
				});
			},
			express(expCode, expNo) {
				KDNWidget.run({
					serviceType: "A",
					expCode,
					expNo
				})
			},
			payNow({
				order_num,
				money,
				order_id
			}) { // 点击立即付款
				// console.log(order_id)
				uni.navigateTo({
					url: `../pay-order/pay-order?order_num=${order_num}&money=${money}&order_id=${order_id}`
				})
			},
			received({
				order_num
			}) { // 点击确认收货
				uni.showModal({
					title: '提示',
					content: '确认收到货物？',
					success: (res) => {
						if (res.confirm) {
							uni.loading()
							_API_OrderReceiveGoods1({
								order_num
							}).then(() => {
								uni.startPullDownRefresh()
							})
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.my-order {
		@include page();

		.content {
			// padding-top: 116rpx;
			@include flex(column);
			display: flex;
			justify-content: space-between;
			flex-direction: column;
		}
	}
	.topt {
		width: 100%;
		padding: 30rpx 24rpx 24rpx 24rpx;
		box-sizing: border-box;
		background-color: #fff;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 10000;
	
		.search_con {
			width: 700rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
	
		.search_inp {
			height: 80rpx;
			width: 100%;
			padding: 0 10rpx 0 30rpx;
			border-radius: 44rpx;
			background: #F9F9FB;
			display: flex;
			justify-content: space-between;
			align-items: center;
	
			.flex {
				display: flex;
			}
		}
	
		.search {
			width: 132rpx;
			height: 64rpx;
			line-height: 64rpx;
			font-size: 24rpx;
			color: #FFFFFF;
			text-align: center;
			background: linear-gradient(92deg, #F30000 0%, #FE4815 100%);
			border-radius: 32rpx;
		}
	}
	.popBox {
		border-radius: 40rpx 40rpx 0px 0px;
		padding: 30rpx 30rpx 0 30rpx;

		&_title {
			width: 100%;
			text-align: center;
			font-size: 36rpx;
			font-weight: bold;
			color: #333;
			margin-bottom: 20rpx;
		}

		&_btn {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 52rpx;
			height: 100rpx;
			border-top: 2rpx solid #EEEEEE;
			margin-top: 40rpx;

			.btn {
				width: 308rpx;
				height: 88rpx;
				text-align: center;
				line-height: 88rpx;
				font-size: 32rpx;
				font-weight: bold;
				border-radius: 44rpx;
			}

			.qu {
				border: 2rpx solid #FB231F;
				color: #FB231F;
				background-color: #FFF4F3;
			}

			.submit {
				color: #fff;
				background: linear-gradient(93deg, #FF232C 0%, #FF571B 100%);
			}
		}

		.uni-list {
			padding: 30rpx 0;
			width: 690rpx;
			font-size: 32rpx;
			font-weight: bold;
			color: #333;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.input {
			width: 690rpx;
			height: 224rpx;
			background: #F8F8F8;
			border-radius: 24rpx;
			padding: 30rpx;
		}

		.border {
			border-bottom: 2rpx solid #EEEEEE;
		}
	}

	.pai_red {
		font-size: 32rpx;
		color: #FB231F;
		font-weight: bold;
	}

	.SwiperNav {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 112rpx;
		color: #333333;
		font-size: 28rpx;
		background-color: #ffffff;
		padding: 0 98rpx;
		.red {
			color: #FB231F;
		}
		.active {
			position: relative;
			font-weight: bolder;

			&::before {
				content: "";
				display: block;
				width: 42rpx;
				height: 8rpx;
				border-radius: 8rpx;
				background: linear-gradient(180deg, #FF232C 0%, #FF571B 100%);
				position: absolute;
				bottom: 0;
				left: 0;
				transform: translateY(8rpx);
			}
		}
	}

	.flex {
		display: flex;
		justify-content: space-between;
		align-items: center;

		.hebing {
			width: 76rpx;
			line-height: 44rpx;
			color: #fff;
			font-size: 28rpx;
			text-align: center;
			border-radius: 6rpx;
			background: linear-gradient(82deg, #FFC401 0%, #FE0000 100%);
		}
	}

	.OrderList {
		flex: 1;
		overflow: hidden;
		width: 100%;
		padding: 30rpx;

		.anniugray {
			width: 160rpx;
			height: 64rpx;
			text-align: center;
			line-height: 64rpx;
			border-radius: 34rpx;
			margin-left: 20rpx;
			font-size: 28rpx;
			background: #F8F8F8;
			border: 2rpx solid #CCCCCC;
			color: 333;
			// margin-right: 22rpx;
		}

		&-cancel {

			.item-body-level,
			.item-footer-btn {
				background: #F8F8F8 !important;
				color: #999999 !important;
			}

			.item-header .spec,
			.item-body-total .spec {
				color: #999999 !important;
			}

			.grey {
				color: #999999 !important;
			}
		}

		&-item {
			width: 100%;
			border-radius: 24rpx;
			background-color: #fff;
			margin-bottom: 30rpx;
			position: relative;
			overflow: hidden;

			.item-cancel-img {
				position: absolute;
				top: -30rpx;
				right: 30rpx;
				z-index: 99;
				display: block;
				width: 153rpx;
				height: 153rpx;
			}

			.item-header {
				height: 100rpx;
				width: 100%;
				border-bottom: 1px solid #E9E9E9;
				display: flex;
				align-items: center;
				justify-content: space-between;
				color: #333333;
				font-size: 28rpx;
				padding: 0 30rpx;

				.spec {
					color: #FB231F;
					font-weight: bold;
				}

				&-copy {
					color: #FFFFFF;
					font-size: 24rpx;
					width: 88rpx;
					height: 46rpx;
					line-height: 46rpx;
					text-align: center;
					background: linear-gradient(to right, #F97C55, #F44545);
					border-radius: 4rpx;
				}
			}

			.item-body {
				width: 100%;
				padding: 30rpx;
				border-bottom: 1px solid #E9E9E9;
				box-sizing: border-box;
				position: relative;

				.yellow {
					width: 630rpx;
					height: 70rpx;
					background: #FBF7D2;
					border-radius: 8rpx;
					padding-left: 50rpx;
					// text-align: center;
					line-height: 70rpx;
					font-size: 28rpx;
					font-weight: bold;
					color: #FF6400;
					margin-top: 30rpx;
				}

				&-level {
					font-size: 24rpx;
					height: 50rpx;
					border-top-left-radius: 50rpx;
					border-bottom-left-radius: 50rpx;
					background: linear-gradient(203deg, #FBDCAC 0%, #FFEFD7 31%, #FFDCA5 55%, #FEEACB 90%, #F9D193 100%);
					padding: 0 10rpx 0 16rpx;
					position: absolute;
					top: 30rpx;
					right: 0;
					line-height: 50rpx;
					color: #FB231F;
				}

				&-name {
					color: #333333;
					font-size: 32rpx;
					margin-bottom: 10rpx;
					font-weight: bold;
				}

				&-phone {
					color: #999999;
					font-size: 28rpx;
					margin-bottom: 10rpx;
				}

				&-address {
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-bottom: 30rpx;

					.address-text {
						flex: 1;
						overflow: hidden;
						margin-right: 100rpx;
						color: #333333;
						font-size: 28rpx;
					}

					.address-arrow {
						display: block;
						width: 30rpx;
						height: 30rpx;
					}
				}

				&-total {
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: flex-end;
					color: #333333;
					font-size: 28rpx;

					.spec {
						color: #F76454;
					}
				}
			}

			.item-footer {
				width: 100%;
				height: 128rpx;
				display: flex;
				align-items: center;
				justify-content: flex-end;
				padding: 0 30rpx;
				box-sizing: border-box;

				&-time {
					color: #333333;
					font-size: 28rpx;
					margin-right: auto;
				}

				&-btn {
					color: #ffffff;
					font-size: 28rpx;
					background: linear-gradient(to right, #F97C55, #F44545);
					width: 160rpx;
					height: 64rpx;
					border-radius: 34rpx;
					line-height: 64rpx;
					text-align: center;
					margin-right: 20rpx;

					&:nth-last-of-type(1) {
						margin-right: 0;
					}
				}
			}
		}
	}

	.noTips {
		width: 100%;
		text-align: center;
	}
</style>