mnsx/user/page/depositAdmin.vue

<template>
	<view class="content">
		<!-- <swiper :current="tabCurrentIndex" class="swiper-box" duration="300" @change="changeTab">
			<swiper-item class="tab-content" v-for="(tabItem, tabIndex) in navList" :key="tabIndex">
				<scroll-view class="list-scroll-content" scroll-y @scrolltolower="loadData"> -->
		<view class="navbar">
			<view v-for="(item, index) in navList" :key="index" class="nav-item"
				:class="{ current: tabCurrentIndex === index }" @click="tabClick(index)">{{ item.text }}</view>
		</view>
		<view class="top-search">
			<input type="number" class="search-key" placeholder="请输入用户手机号码" v-model="userphone" />
			<image src="../../static/icon/search.png" mode="" class="search-logo"></image>
			<view class="search-btn" @click.stop="search">搜索</view>
		</view>

		<!-- 普通商品退押金 -->
		<template v-if="tabCurrentIndex==0">
			<scroll-view scroll-y="true" :style="{'height': height}" class="scoll-wrap" @scrolltolower="loadData()"
				style="padding-top: 20rpx;">
				<empty v-if="navList[0].loaded === true && navList[0].orderList.length === 0"></empty>
				<!-- 订单列表 -->
				<view v-for="(item, index) in navList[0].orderList" :key="index" class="order-item">
					<view class="i-top b-b">
						<!-- <view class=""></view> -->
						<text class="time">订单编号：{{ item.order_id }}</text>
						<text class="state" style=" color: #901b21; "
							v-if="item.deposit*1 > 0">{{item.deposit_status== 0? '押金未退': '押金已退' }}</text>
						<text class="state" style=" color: #901b21; "
							v-if="item.deposit*1 == 0">无押金</text>
						<text v-if="item.status === 4" class="del-btn iconfont icondelete"
							@click="deleteOrder(index)"></text>
					</view>
					<view class="goods-box-single" v-for="(goodsItem, goodsIndex) in item._info" :key="goodsIndex">
						<image class="goods-img" :src="goodsItem.cart_info.productInfo.image" mode="scaleToFill">
						</image>
						<view class="right">
							<view class="flex-start">
								<text class="title clamp2">{{ goodsItem.cart_info.productInfo.store_name }}</text>
								<text class="price"
									style="flex-grow: 1;text-align: right;color: #901B21;font-size: 30rpx;font-weight: bold;">
									{{ goodsItem.cart_info.productInfo.price | moneyNum }}
									<!-- 押金：{{item.deposit}} -->
								</text>
							</view>
							<view class="row flex">
								<text class="attr-box">x {{ goodsItem.cart_info.cart_num }}</text>
							</view>
						</view>
					</view>

					<view class="price-box" v-if="item.deposit*1 > 0">
						<text
							style="color: #901b21;display: inline-block;margin-right: 8rpx;">押金：{{item.deposit}}</text>
						已退还：{{item.deposit_back}}
					</view>
					<view class="action-box b-t" v-if="(item.deposit*1 > 0) && (item.deposit != item.deposit_back*1)">
						<button class="action-btn" @click.stop="backDeposit(item)">退还押金</button>
					</view>

				</view>
				<uni-load-more :status="navList[0].loadingType"></uni-load-more>
			</scroll-view>
		</template>
		<!-- 兑换券退押金 -->
		<template v-if="tabCurrentIndex==1">
			<scroll-view scroll-y="true" :style="{'height': height}" class="scoll-wrap" @scrolltolower="loadData()"
				style="padding-top: 20rpx;">
				<empty v-if="navList[1].loaded === true && navList[1].orderList.length === 0"></empty>
				<!-- 订单列表 -->
				<view v-for="(item, index) in navList[1].orderList" :key="index" class="order-item">
					<view class="i-top b-b">
						<!-- <view class=""></view> -->
						<text class="time">订单编号：{{ item.order_id }}</text>
						<text class="state" style=" color: #901b21; "
							v-if="item.deposit*1 > 0">{{item.deposit_status== 0? '押金未退': '押金已退' }}</text>
						<text class="state" style=" color: #901b21; "
							v-if="item.deposit*1 == 0">无押金</text>
						<text v-if="item.status === 4" class="del-btn iconfont icondelete"
							@click="deleteOrder(index)"></text>
					</view>
					<view class="goods-box-single" v-for="(goodsItem, goodsIndex) in item._info" :key="goodsIndex">
						<image class="goods-img" :src="goodsItem.cart_info.productInfo.image" mode="scaleToFill">
						</image>
						<view class="right">
							<view class="flex-start">
								<text class="title clamp2">{{ goodsItem.cart_info.productInfo.store_name }}</text>
								<text class="price"
									style="flex-grow: 1;text-align: right;color: #901B21;font-size: 30rpx;font-weight: bold;">
									{{ goodsItem.cart_info.productInfo.price | moneyNum }}
									<!-- 押金：{{item.deposit}} -->
								</text>
							</view>
							<view class="row flex">
								<text class="attr-box">x {{ goodsItem.cart_info.cart_num }}</text>
							</view>
						</view>
					</view>

					<view class="price-box" v-if="item.deposit*1 > 0">
						<text
							style="color: #901b21;display: inline-block;margin-right: 8rpx;">押金：{{item.deposit}}</text>
						已退还：{{item.deposit_back}}
					</view>
					<view class="action-box b-t" v-if="(item.deposit*1 > 0) && (item.deposit != item.deposit_back*1)">
						<button class="action-btn" @click.stop="backDeposit(item)">退还押金</button>
					</view>

				</view>
				<uni-load-more :status="navList[1].loadingType"></uni-load-more>
			</scroll-view>
		</template>
		<!-- 押金退款弹窗 -->
		<uni-popup ref="popupadmin" type="center">
			<view class="bind-admin-wappper">
				<view class="title">押金退还</view>
				<view class="admin-item">
					<view class="item-name">订单号</view>
					<view class="item-val"><input type="text" v-model="orderId" placeholder="订单号不能为空" disabled /></view>
				</view>
				<view class="admin-item">
					<view class="item-name">退还金额</view>
					<view class="item-val"><input type="text" v-model="backNum" placeholder="请输入退还金额" /></view>
				</view>
				<view class="btn-wrapper">
					<view class="btn" @click="backClose">取消</view>
					<view class="btn btn1" @click="qrbackDeposit">确定</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue';
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	import empty from '@/components/empty';
	import {
		orderList,
		orderCancel,
		orderDel,
		orderTake,
		GetAdminOrderList,
		backDeposit,
		getAdminExchangeList,
		backExchangeDeposit
	} from '@/api/order.js';
	export default {
		components: {
			uniLoadMore,
			empty,
			uniPopup
		},
		filters: {
			moneyNum(value) {
				return +value;
			}
		},
		data() {
			return {
				height: '',
				backIndex: 0,
				backMaxNum: 0,
				backNum: '',
				orderId: '',
				loaded: false,
				tabCurrentIndex: 0,
				orderList: [],
				loadingType: 'more',
				page: 1,
				limit: 10,
				navList: [{
						text: '普通商品',
						loadingType: 'more',
						orderList: [],
						page: 1, //当前页数
						limit: 10,
						loaded: false,

					},
					{
						text: '兑换券',
						loadingType: 'more',
						orderList: [],
						page: 1, //当前页数
						limit: 10, //每次信息条数
						loaded: false
					}
				],
				// navList: [{
				// 	state: 3,
				// 	text: '已完成',
				// 	loadingType: 'more',
				// 	orderList: [],
				// 	page: 1, //当前页数
				// 	limit: 10 //每次信息条数
				// }],
				isUser: true,
				userphone: '',
				keyword: '',
			};
		},
		onLoad(options) {
			/**
			 * 修复app端点击除全部订单外的按钮进入时不加载数据的问题
			 * 替换onLoad下代码即可
			 */
			// console.log(options);
			// this.isUser = options.isUser;
			// console.log(this.isUser);
			// this.tabCurrentIndex = +options.state;
			// // #ifndef MP
			// this.loadData();
			// // #endif
			// // #ifdef MP
			// if (options.state == 0) {
			// 	this.loadData();
			// }
			// // #endif
			this.loadData()
		},
		onReady(res) {
			var obj = this;
			uni.getSystemInfo({
				success: resu => {
					const query = uni.createSelectorQuery();
					query.select('.scoll-wrap').boundingClientRect();
					query.exec(function(res) {
						console.log(res, 'ddddddddddddd');
						obj.height = resu.windowHeight - res[0].top + 'px';
						console.log('打印页面的剩余高度', obj.height);
					});
				},
				fail: res => {}
			});
		},
		// #ifdef APP-PLUS || H5
		onBackPress(e) {
			uni.switchTab({
				url: '/pages/user/user'
			});
			return true;
		},
		// #endif
		methods: {
			//顶部tab点击
			tabClick(index) {
				this.tabCurrentIndex = index;
				this.loadData('tab')
			},
			// 转换金额为数字
			moneyNum(value) {
				return +value;
			},
			//获取订单列表
			loadData(source) {
				//这里是将订单挂载到tab列表下
				let obj = this
				let index = obj.tabCurrentIndex
				let navItem = obj.navList[index]
				if (navItem.loadingType === 'loading') {
					//防止重复加载
					return;
				}
				if (navItem.loadingType === 'noMore') {
					//防止重复加载
					return;
				}
				if (navItem.loaded && source == 'tab') {
					return
				}
				// 修改当前对象状态为加载中
				navItem.loadingType = 'loading';
				if (index == 0) {
					GetAdminOrderList({
							status: 3,
							page: navItem.page,
							limit: navItem.limit,
							user_phone: obj.keyword
						})
						.then(({
							data
						}) => {
							console.log(data, 'ddddddddddd');
							let arr = data.map(e => {
								let b = this.orderStateExp(e.status);
								e.stateTip = b.stateTip;
								e.stateTipColor = b.stateTipColor;
								return e;
							});
							navItem.orderList = navItem.orderList.concat(arr);
							console.log(navItem.orderList);
							navItem.page++;
							if (navItem.limit == data.length) {
								//判断是否还有数据， 有改为 more， 没有改为noMore
								navItem.loadingType = 'more';
								// return;
							} else {
								//判断是否还有数据， 有改为 more， 没有改为noMore
								navItem.loadingType = 'noMore';
							}
							// uni.hideLoading();
							this.$set(navItem, 'loaded', true);
						})
						.catch(e => {
							console.log(e);
						});


				}
				if (index == 1) {
					getAdminExchangeList({
						page: 1,
						limit: 10,
						user_phone: obj.keyword
					}).then(({
						data
					}) => {
						console.log(data, 'ddddddddddd');
						let arr = data.map(e => {
							let b = this.orderStateExp(e.status);
							e.stateTip = b.stateTip;
							e.stateTipColor = b.stateTipColor;
							return e;
						});
						navItem.orderList = navItem.orderList.concat(arr);
						console.log(navItem.orderList);
						navItem.page++;
						if (navItem.limit == data.length) {
							//判断是否还有数据， 有改为 more， 没有改为noMore
							navItem.loadingType = 'more';
							// return;
						} else {
							//判断是否还有数据， 有改为 more， 没有改为noMore
							navItem.loadingType = 'noMore';
						}
						// uni.hideLoading();
						this.$set(navItem, 'loaded', true);
					})
				}


			},
			//订单状态文字和颜色
			orderStateExp(state) {
				let stateTip = '',
					stateTipColor = '#fa436a';
				switch (+state) {
					case 0:
						stateTip = '待付款';
						break;
					case 1:
						stateTip = '待发货';
						break;
					case 2:
						stateTip = '待收货';
						break;
					case 3:
						stateTip = '待评价';
						break;
					case 4:
						stateTip = '已完成';
						stateTipColor = '#901b21';
						break;
					case 9:
						stateTip = '订单已关闭';
						stateTipColor = '#909399';
						break;

						//更多自定义
				}
				return {
					stateTip,
					stateTipColor
				};
			},
			backDeposit(item) {
				let obj = this
				if (obj.tabCurrentIndex == 0) {
					obj.orderId = item.order_id
				} else {
					obj.orderId = item.id
				}

				obj.backMaxNum = item.deposit * 1 - item.deposit_back * 1
				this.$refs.popupadmin.open()
				obj.backIndex = obj.navList[obj.tabCurrentIndex].orderList.indexOf(item)
				console.log(item, 'ddddddddddddddddddddd', obj.backIndex)
			},
			qrbackDeposit() {
				let obj = this
				if (obj.backNum == '') {
					obj.$api.msg('请输入退还押金')
					return
				}
				if (obj.backNum * 1 > obj.backMaxNum * 1) {
					obj.$api.msg('退还金额大于押金')
					return
				}
				if (obj.orderId == '') {
					obj.$api.msg('请选择订单')
					return
				}
				if (obj.tabCurrentIndex == 0) {
					backDeposit({
						order_id: obj.orderId,
						refund_price: obj.backNum
					}).then(res => {
						uni.showToast({
							title: '退还成功',
							duration: 2000
						});
						console.log(res)
						obj.navList[obj.tabCurrentIndex].orderList[obj.backIndex].deposit_status = 1
						obj.navList[obj.tabCurrentIndex].orderList[obj.backIndex].deposit_back = obj.backNum * 1 +
							obj.navList[obj.tabCurrentIndex].orderList[obj.backIndex]
							.deposit_back * 1
						obj.$refs.popupadmin.close()
						obj.orderId = ''
						obj.backMaxNum = ''
						obj.backNum = ''
					})
				} else {
					backExchangeDeposit({
						id: obj.orderId,
						refund_price: obj.backNum
					}).then(res => {
						uni.showToast({
							title: '退还成功',
							duration: 2000
						});
						console.log(res)
						obj.navList[obj.tabCurrentIndex].orderList[obj.backIndex].deposit_status = 1
						obj.navList[obj.tabCurrentIndex].orderList[obj.backIndex].deposit_back = obj.backNum * 1 +
							obj.navList[obj.tabCurrentIndex].orderList[obj.backIndex]
							.deposit_back * 1
						obj.$refs.popupadmin.close()
						obj.orderId = ''
						obj.backMaxNum = ''
						obj.backNum = ''
					})
				}

			},
			backClose() {
				let obj = this
				obj.$refs.popupadmin.close()
				obj.orderId = ''
				obj.backMaxNum = ''
				obj.backNum = ''
			},
			search() {
				let obj = this
				if (obj.userphone == '') {
					obj.keyword = ''
				} else {
					const reg = /^(\+?0?86-?)?1[\d]\d{9}$/;
					if (!reg.test(obj.userphone)) {
						obj.$api.msg('请填写正确的手机号码');
						return;
					}
				}
				obj.keyword = obj.userphone
				obj.navList[obj.tabCurrentIndex].orderList = []
				obj.navList[obj.tabCurrentIndex].loadingType = 'more'
				obj.navList[obj.tabCurrentIndex].page = 1
				obj.loadData()
			}
		}
	};
</script>

<style lang="scss">
	page,
	.content {
		background: $page-color-base;
		height: 100%;
	}

	.swiper-box {
		height: calc(100% - 40px);
	}

	.list-scroll-content {
		height: 100%;
	}

	.navbar {
		display: flex;
		height: 40px;
		padding: 0 5px;
		background: #fff;
		box-shadow: 0 1px 5px rgba(0, 0, 0, 0.06);
		position: relative;
		z-index: 10;

		.nav-item {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			font-size: 15px;
			color: $font-color-dark;
			position: relative;

			&.current {
				color: $base-color;

				&:after {
					content: '';
					position: absolute;
					left: 50%;
					bottom: 0;
					transform: translateX(-50%);
					width: 44px;
					height: 0;
					border-bottom: 2px solid $base-color;
				}
			}
		}
	}

	.uni-swiper-item {
		height: auto;
	}

	.order-item {
		display: flex;
		flex-direction: column;
		padding-left: 30rpx;
		background: #fff;
		margin-bottom: 16rpx;

		.i-top {
			display: flex;
			align-items: center;
			height: 80rpx;
			padding-right: 30rpx;
			font-size: $font-base;
			color: $font-color-dark;
			position: relative;

			.time {
				flex: 1;
			}

			.state {
				color: $base-color;
			}

			.del-btn {
				padding: 10rpx 0 10rpx 36rpx;
				font-size: $font-lg;
				color: $font-color-light;
				position: relative;

				&:after {
					content: '';
					width: 0;
					height: 30rpx;
					border-left: 1px solid $border-color-dark;
					position: absolute;
					left: 20rpx;
					top: 50%;
					transform: translateY(-50%);
				}
			}
		}

		/* 多条商品 */
		.goods-box {
			height: 160rpx;
			padding: 20rpx 0;
			white-space: nowrap;

			.goods-item {
				width: 120rpx;
				height: 120rpx;
				display: inline-block;
				margin-right: 24rpx;
			}

			.goods-img {
				display: block;
				width: 100%;
				height: 100%;
			}
		}

		/* 单条商品 */
		.goods-box-single {
			display: flex;
			padding: 20rpx 0;

			.goods-img {
				display: block;
				width: 120rpx;
				height: 120rpx;
			}

			.right {
				flex: 1;
				display: flex;
				flex-direction: column;
				padding: 0 30rpx 0 24rpx;
				overflow: hidden;

				.row {
					margin-top: 10rpx;
					justify-content: space-between;
				}

				.row_title {
					// padding:5rpx 10rpx;
					// background-color: #dddddd;
					// border-radius: 10rpx;
					// font-size: 22rpx;
					// color: #ffffff;
					display: inline-block;
					padding: 7rpx 11rpx;
					font-size: 20rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #fd5b23;
					background: #ffeae5;
					border-radius: 5rpx;
				}

				.title {
					font-size: $font-base + 2rpx;
					color: $font-color-dark;
					line-height: 1;
					width: 80%;
				}

				.attr-box {
					display: flex;
					justify-content: flex-end;
					font-size: $font-sm + 2rpx;
					color: $font-color-light;
				}

				.price {
					display: inline;
					font-size: $font-base + 2rpx;
					color: $font-color-dark;

					&:before {
						content: '￥';
						font-size: $font-sm;
					}
				}
			}
		}

		.price-box {
			display: flex;
			justify-content: flex-end;
			align-items: baseline;
			padding: 20rpx 30rpx;
			font-size: $font-sm + 2rpx;
			color: $font-color-light;

			.num {
				margin: 0 8rpx;
				color: $font-color-dark;
			}

			.price {
				font-size: $font-lg;
				color: $font-color-dark;

				&:before {
					content: '￥';
					font-size: $font-sm;
					margin: 0 2rpx 0 8rpx;
				}
			}
		}

		.action-box {
			display: flex;
			justify-content: flex-end;
			align-items: center;
			height: 100rpx;
			position: relative;
			padding-right: 30rpx;

		}

		.action-btn {
			width: 160rpx;
			height: 60rpx;
			margin: 0;
			margin-left: 24rpx;
			padding: 0;
			text-align: center;
			line-height: 60rpx;
			font-size: $font-sm + 2rpx;
			color: $font-color-dark;
			background: #fff;
			border-radius: 100px;
			color: #901b21;
			border: #901b21;

			&:after {
				border-radius: 100px;
			}

			&.recom {
				color: $base-color;

				&:after {
					border-color: $base-color;
				}
			}

			&.evaluate {
				color: $color-yellow;

				&:after {
					border-color: $color-yellow;
				}
			}
		}
	}

	/* load-more */
	.uni-load-more {
		display: flex;
		flex-direction: row;
		height: 80rpx;
		align-items: center;
		justify-content: center;
	}

	.uni-load-more__text {
		font-size: 28rpx;
		color: #999;
	}

	.uni-load-more__img {
		height: 24px;
		width: 24px;
		margin-right: 10px;
	}

	.uni-load-more__img>view {
		position: absolute;
	}

	.uni-load-more__img>view view {
		width: 6px;
		height: 2px;
		border-top-left-radius: 1px;
		border-bottom-left-radius: 1px;
		background: #999;
		position: absolute;
		opacity: 0.2;
		transform-origin: 50%;
		animation: load 1.56s ease infinite;
	}

	.uni-load-more__img>view view:nth-child(1) {
		transform: rotate(90deg);
		top: 2px;
		left: 9px;
	}

	.uni-load-more__img>view view:nth-child(2) {
		transform: rotate(180deg);
		top: 11px;
		right: 0;
	}

	.uni-load-more__img>view view:nth-child(3) {
		transform: rotate(270deg);
		bottom: 2px;
		left: 9px;
	}

	.uni-load-more__img>view view:nth-child(4) {
		top: 11px;
		left: 0;
	}

	.load1,
	.load2,
	.load3 {
		height: 24px;
		width: 24px;
	}

	.load2 {
		transform: rotate(30deg);
	}

	.load3 {
		transform: rotate(60deg);
	}

	.load1 view:nth-child(1) {
		animation-delay: 0s;
	}

	.load2 view:nth-child(1) {
		animation-delay: 0.13s;
	}

	.load3 view:nth-child(1) {
		animation-delay: 0.26s;
	}

	.load1 view:nth-child(2) {
		animation-delay: 0.39s;
	}

	.load2 view:nth-child(2) {
		animation-delay: 0.52s;
	}

	.load3 view:nth-child(2) {
		animation-delay: 0.65s;
	}

	.load1 view:nth-child(3) {
		animation-delay: 0.78s;
	}

	.load2 view:nth-child(3) {
		animation-delay: 0.91s;
	}

	.load3 view:nth-child(3) {
		animation-delay: 1.04s;
	}

	.load1 view:nth-child(4) {
		animation-delay: 1.17s;
	}

	.load2 view:nth-child(4) {
		animation-delay: 1.3s;
	}

	.load3 view:nth-child(4) {
		animation-delay: 1.43s;
	}

	@-webkit-keyframes load {
		0% {
			opacity: 1;
		}

		100% {
			opacity: 0.2;
		}
	}

	.bind-admin-wappper {
		width: 600rpx;
		height: 682rpx;
		border-radius: 20rpx;
		background-color: #fff;

		.title {
			padding-top: 70rpx;
			font-size: 42rpx;
			text-align: center;
			font-family: PingFang SC;
			font-weight: 500;
			color: #901b21;
		}

		.admin-item {
			.item-name {
				padding-top: 55rpx;
				padding-bottom: 20rpx;
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
				padding-left: 68rpx;
			}

			.item-val {
				width: 470rpx;
				height: 70rpx;
				line-height: 70rpx;
				margin: 0 auto;
				background: #ffffff;
				border: 1px solid #999999;
				border-radius: 6px;
				outline: none;

				input {
					padding-left: 20rpx;
					display: block;
					height: 70rpx;
					line-height: 70rpx;
				}
			}
		}

		.btn-wrapper {
			margin-top: 60rpx;
			display: flex;
			justify-content: space-between;
			height: 50rpx;
			padding: 0 65rpx;

			.btn {
				// margin-right: 22rpx;
				text-align: center;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				line-height: 70rpx;
				color: #666666;
				width: 224rpx;
				height: 70rpx;
				border-radius: 6rpx;
				border: 1px solid #999999;
			}

			.btn1 {
				color: #fff;
				background-color: #901b21;
			}
		}
	}

	.top-search {
		width: 750rpx;
		height: 100rpx;
		// padding-top: 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;

		.search-key {
			width: 700rpx;
			height: 70rpx;
			padding-left: 100rpx;
			background: #FFFFFF;
			box-shadow: 0px 1rpx 21rpx 0px rgba(144, 27, 33, 0.12);
			border-radius: 35rpx;
			position: relative;
		}

		.search-logo {
			width: 36rpx;
			height: 36rpx;
			position: absolute;
			top: 0;
			bottom: 0;
			left: 50rpx;
			margin: auto;
		}

		.search-btn {
			width: 150rpx;
			height: 70rpx;
			border-radius: 30rpx;
			color: rgb(144, 27, 33);
			text-align: center;
			line-height: 70rpx;
			position: absolute;
			top: 0;
			bottom: 0;
			right: 10rpx;
			margin: auto;
			// background-color: red;
			z-index: 9;
		}
	}
</style>