EpicSoul/subPackages/order/trades.vue

<template>
	<view class="bg">
		<view class="top-bg">
			<view class="search-box">
				<view class="left">
					<image src="https://static.ticket.sz-trip.com/yandu/images/eventCalendar/search.png"
						mode="aspectFill"></image>
					<input v-model="keywords" type="text" placeholder="请输入关键字" @confirm="search()" />
				</view>

				<!-- <view class="btn" @click="search()">搜索</view> -->
			</view>
			<view class="common-box">
				<view class="common-types com-flex-tao">
					<view @click="setType(index)" v-for="(item, index) in typeList" :key="item.id"
						:class="['common-type', typeIndex == index ? 'active' : '']">
						{{ item.name }}
					</view>
				</view>
			</view>
		</view>
		<view class="list-common-empty" v-if="list.length == 0">
			<img :src="showImg('/uploads/20221201/8f97261b8eddffcc55342eca0ed0249c.png')" />
			<p class="list-common-empty-tip">暂无订单~</p>
		</view>
		<view class="trade-list" v-if="list.length > 0">
			<view v-for="(item, key) in list" :key="item.id" class="trade-items" v-if="showItem(item)"
				@click="() => choseType(item)">
				<view class="trade-item-head">
					<view class="trade-item-head-tid">订单号:{{ item.f_order_id }}</view>
					<view class="trade-item-head-state">{{ item.f_status_text }}</view>
				</view>
				<view class="trade-item-pros">
					<view class="trade-item-pro" v-for="(pro, proIndex) in item.data" :key="pro.child_id">
						<view class="trade-item-pro-img" v-if="pro.specifications_image">
							<image :src="showImg(pro.specifications_image)" mode="aspectFill"></image>
						</view>
						<view style="flex: 1;">
							<view class="trade-item-pro-title">{{ pro.goods_title }}</view>
							<view class="trade-item-pro-subtitle">{{ pro.specifications_name }}</view>
						</view>
						<view class="trade-item-pro-price">
							<view class="trade-item-pro-price-pri">￥{{ pro.pay_money / 100 }}</view>
							<view class="trade-item-pro-num">x{{ pro.num }}</view>
						</view>
					</view>
				</view>
				<view class="trade-item-info">
					合计
					<text>￥{{ item.f_pay_money / 100 }}</text>
				</view>
				<view class="trade-item-btns">
					<view @click.stop="() => refund(item.f_order_id, key)" v-if="item.f_status == 'PAYMENT_SUCCESSFULLY'">
						申请退款</view>
					<view @click.stop="() => closeOrder(item.f_order_id, item)" v-if="item.f_status == 'WAIT_PAYMENT'">关闭订单
					</view>
					<view @click.stop="()=>confirmpost(item.f_order_id, key)" v-if="item.data[0].status=='POST'">确认收货</view>
					<view class="pay-btn" @click.stop="()=>setOrderId(item.f_order_id, item)" v-if="item.f_status == 'WAIT_PAYMENT'">
						立即支付</view>
				</view>
			</view>
		</view>
		<!-- <view v-if="list.length === 0 && finished" class="noDate">
			<view>暂无订单</view>
		</view> -->
	</view>
</template>

<script>
	export default {
		name: 'Trades',
		data() {
			return {
				finished: false,
				list: [],
				typeList: [{
						id: 'ALL',
						name: '全部'
					},
					{
						id: 'WAIT_PAYMENT',
						name: '待付款'
					},
					{
						id: 'PAYMENT_SUCCESSFULLY',
						name: '待使用'
					},
					{
						// id: 'PAYMENT_SUCCESSFULLY',
						id: "WAIT_DELIVER",
						name: '待发货'
					},
					{
						id: 'POST',
						name: '待收货'
					},
					// {
					// 	id: 'WAIT_COMMENT',
					// 	name: '待评价'
					// },
					{
						id: 'WAIT_REFUND,REFUND_SUCCESS,REFUND_REFUSAL,REFUND_ERROR,REFUND_PART',
						name: '退款/售后'
					}
				],
				typeIndex: 0,
				ajaxFlag: true,
				keywords: '',
				orderId: null,
				dateRange: [],
				type: ''
			};
		},
		onLoad(options) {
			console.log(options);
			if (options.type) this.typeIndex = this.typeList.findIndex(vm => vm.name === options.type);
			uni.$on("updateDataByConnect", this.getDataByConnect)
		},
		onShow() {
			this.getList();
		},
		onUnload() {
			uni.$off("updateDataByConnect", this.getDataByConnect)
		},
		onReachBottom() {
			if (this.finished) return false;
			this.getList();
		},
		methods: {
			getDataByConnect(data) {
				if (data.msgType == "updateOrderTrades") {
					this.list = [];
					this.finished = false;
					this.getList()
				}
			},
			emptyFunc() {

			},
			showItem(item) {
				let flag = true;
				// if (this.typeIndex == 2 && item.order_child[0] && !item.order_child[0].consignee) flag = false
				return flag;
			},
			onReload() {
				this.list = [];
				this.finished = false;
				this.getList();
			},
			setType(index) {
				this.typeIndex = index;
				this.onReload();
			},
			setOrderId(id, item) {
				console.log(id, item)
				let that = this;
				that.orderId = id;
				that.Post({
						order_id: id,
						type: "miniprogram",
						platform: 'miniprogram'
					},
					'/api/pay/unify'
				).then(res => {
					if (res.data) {
						uni.requestPayment({
							nonceStr: res.data.nonceStr,
							package: res.data.package,
							paySign: res.data.paySign,
							signType: res.data.signType,
							timeStamp: res.data.timeStamp,
							success: () => {
								const templateIds = [
									// 退款成功通知
									'hRZoiEES2BWtKb6Xgsnn8khLQH9un5j_11qu0bwlhfE',
									// 出票结果通知
									'YyTCUIYBnrj9CyKks8cOjNX_Rk8a4yVdswMP-zXVbhc'
								]
								uni.requestSubscribeMessage({
									tmplIds: templateIds,
									complete (res) {
										that.list = [];
										that.finished = false;
										that.getList()
									}
								})
							}
						});
					}
				});
			},
			// 确认收货
			confirmpost(id, index) {
				let that = this;
				uni.showModal({
					title: '提示',
					content: '是否确认收货？',
					success: successRes => {
						if (successRes.confirm) {
							that.Post({
									order_id: id
								},
								'/api/order/confirmPost'
							).then(res => {
								if (res.code == 200) {
									// list[index].order_child.map(item => {
									// 	item.status = 'WAIT_COMMENT';
									// });
									// list[index].status = 'WAIT_COMMENT';
									// list[index].postFlag = false;
									// that.list = list;
									uni.showToast({
										title: '操作成功'
									});
									// that.$forceUpdate();
									that.list = [];
									that.finished = false;
									that.getList();
								}
							});
						}
					}
				});
			},
			// 关闭订单
			closeOrder(id, index) {
				console.log(id, index)
				let that = this;
				uni.showModal({
					title: '提示',
					content: '是否关闭订单？',
					success: successRes => {
						if (successRes.confirm) {
							that.Post({
									order_id: id
								},
								'/api/order/closeOrder'
							).then(res => {
								if (res.code == 200) {
									uni.showToast({
										title: '关闭成功',
										icon: 'success'
									});
									that.list = [];
									that.finished = false;
									that.getList();
								}
							});
						}
					}
				});
			},
			//删除订单
			deletOrder(id) {
				let that = this;
				uni.showModal({
					title: '提示',
					content: '是否删除订单？',
					success: successRes => {
						if (successRes.confirm) {
							that.Post({
									order_id: id
								},
								'/api/order/delOrder'
							).then(res => {
								if (res.code == 200) {
									uni.showToast({
										title: '删除成功',
										icon: 'success'
									});
									that.list = [];
									that.finished = false;
									that.getList();
								}
							});
						}
					}
				});
			},
			// 申请退款
			refund(id, index) {
				let that = this;
				uni.showModal({
					title: '提示',
					content: '是否申请退款？',
					success: successRes => {
						if (successRes.confirm) {
							that.Post({
									order_id: id
								},
								'/api/order/applyRefund'
							).then(res => {
								if (res.code == 200) {
									uni.showToast({
										title: '申请成功',
										icon: 'success'
									});
									that.onReload();
								}
							});
						}
					}
				});
			},
			search(e) {
				this.list = [];
				this.getList();
				// if (e.keyCode == 13) {
				// 	//  提交
				// 	this.keywords = e.target.value;
				// }
			},
			getList() {
				let data = {
					status: this.typeList[this.typeIndex].id == 'ALL' ? '' : this.typeList[this.typeIndex].true_id ||
						this.typeList[this.typeIndex].id,
					offset: this.list.length,
					limit: 5,
					name: this.keywords,
					type: this.typeList[this.typeIndex].name == '待使用' ? 1 : (this.typeList[this.typeIndex].name ==
						'待发货' ? 2 : '')
				};
				this.Post(data, '/api/order/orderList').then(res => {
					let arr = res.data;
					arr.forEach(item => {
						console.log(item)
						item.order_child.forEach((itemX, index) => {
							if (index > 0) {
								item.order_child[0].data = [...item.order_child[0].data, ...itemX
									.data
								];
							} else {
								itemX.f_order_id = item.order_id;
								itemX.f_status_text = item.status_text;
								itemX.f_status = item.status;
								itemX.f_pay_money = item.pay_money;
								console.log('1',itemX);
								this.list.push(itemX);
							}
						});
					});
					if (res.data.length < 5) {
						this.finished = true;
					}
				});
			},
			UpdateOrder(id) {
				this.ajaxFlag = false;
				let list = this.list;
				this.Post({
						order_id: id
					},
					'/api/order/orderDetail'
				).then(res => {
					this.ajaxFlag = true;
					list.map(item => {
						if (item.order_id == id) {
							item = res.data;
						}
					});
					this.list = list;
				});
			},
			choseType(item) {
				uni.navigateTo({
					url: '/subPackages/order/detail?id=' + item.f_order_id
				});
			},
		}
	};
</script>

<style scoped lang="scss">
	view {
		box-sizing: border-box;
	}

	.common-box {
		height: 90rpx;
	}

	.common-types {
		background: white;
		height: 90rpx;
		font-weight: 500;
font-size: 31rpx;
color: #333333;
		z-index: 10;
		margin: auto;
		color: #666;
		overflow-x: scroll;
		overflow-y: hidden;
		padding: 0 27rpx;
	}

	.common-types::-webkit-scrollbar {
		width: 0rpx;
		height: 0;
		display: none;
	}

	.common-type {
		flex-shrink: 0;
		margin: 0 26rpx;
		line-height: 90rpx;
		height: 90rpx;
		position: relative;
	}

	.common-type.active {
		font-weight: bold;
		font-size: 31rpx;
		color: #000000;
	}

	.common-type.active:after {
		display: block;
		width: 60%;
		font-size: 0;
		content: '1';
		margin: auto;
		position: absolute;
		left: 0;
		right: 0;
		bottom: 1rpx;
		height: 4rpx;
		background: #74A5AA;
		border-radius: 2rpx;
	}

	.bg {
		min-height: 100vh;
		background-color: #f7f7f7;
	}

	.noDate {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin-top: 200rpx;
	}

	.noDate img {
		width: 514rpx;
		height: auto;
	}

	.noDate view {
		font-size: 24rpx;
		color: #777777;
	}

	.trade-list {
		padding: 28rpx 26rpx;
	}

	.trade-items {
		background-color: white;
		margin-bottom: 28rpx;
		border-radius: 20rpx;
	}

	.trade-item-head {
		display: flex;
		justify-content: space-between;
		padding: 28rpx 20rpx;
		border-bottom: 1rpx solid #d8d8d8;
	}

	.trade-item-head-tid {
		font-size: 24rpx;
		display: flex;
		align-items: center;
		color: #666666;
	}

	.trade-item-head-state {
		font-size: 27rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #FC5109;
	}

	.trade-item-head-name {
		display: flex;
		align-items: center;

		font-size: 31rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;

		image {
			width: 33rpx;
			height: 31rpx;
		}

		view {
			margin-left: 13rpx;
		}
	}

	.trade-item-pros {
		display: flex;
		/* background-color: #F2F2F2; */
		flex-direction: column;
	}

	.trade-item-pro {
		display: flex;
		padding: 20rpx;
		justify-content: space-between;
	}

	.trade-item-pro-img {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.trade-item-pro-img image {
		width: 180rpx;
		height: 180rpx;
		border-radius: 10rpx;
	}

	.trade-item-pro-price {
		display: flex;
		flex-direction: column;
	}

	.trade-item-pro-title {
		text-align: left;
		flex: 1;
		padding: 0 20rpx;
		font-size: 28rpx;
	}

	.trade-item-pro-subtitle {
		text-align: left;
		flex: 1;
		padding: 0 20rpx;
		font-weight: 500;
		font-size: 24rpx;
		color: #888888;
		margin-top: 20rpx;
	}

	.trade-item-pro-price view {
		display: flex;
		flex-wrap: nowrap;
		text-wrap: none;
		white-space: nowrap;
		justify-content: flex-end;
	}

	.trade-item-pro-price-pri {
		font-size: 27rpx;
		color: #C3282E;
		font-weight: 500;
		color: #333333;
	}

	.trade-item-pro-num {
		font-size: 24rpx;
		color: #666666;
		margin-top: 24rpx;
	}

	.trade-item-info {
		font-size: 28rpx;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		background-color: white;
		padding: 0rpx 20rpx;
		margin-top: -6rpx;
		/* border-bottom: 1px solid #B6B6B6; */
	}

	.trade-item-info text {
		font-size: 36rpx;
		font-weight: bold;
		color: rgba(238, 0, 0, 1);
	}

	.trade-item-btns {
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		align-items: center;
		padding: 20rpx;
	}

	.trade-item-btns view {
		margin-left: 20rpx;
		background: rgba(237, 237, 237, 0);
		border: 1rpx solid #999999;
		border-radius: 27rpx;
		padding: 8rpx 16rpx;
		font-size: 27rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
	}

	.trade-item-btns .pay-btn {
		color: #FFFFFF;
		background: #74A5AA;
		border: none;
		padding: 10rpx 16rpx;
	}

	.comment-btn {
		width: 100rpx;
		text-align: center;
		line-height: 40rpx;
		border-radius: 20rpx;
		border: 1px solid #999999;
		color: #333333;
		justify-content: center !important;
		font-size: 24rpx;
		margin-top: 16rpx;
	}

	.list-common-empty {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		min-height: 50vh;
	}

	.list-common-empty img {
		width: 483rpx;
		height: 254rpx;
	}

	.list-common-empty-tip {
		margin-top: 61rpx;

		font-size: 29rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #8599b5;
	}

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

	.search-box {
		width: 697rpx;
		height: 67rpx;
		background: #f2f2f2;
		border-radius: 33rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 8rpx 0 28rpx;
		margin: 0 auto;
		margin-bottom: 20rpx;

		.left {
			display: flex;
			align-items: center;

			image {
				width: 28rpx;
				height: 30rpx;
			}

			input {
				margin-left: 20rpx;
				font-size: 31rpx;
				font-weight: 400;
				color: #333;
				width: 450rpx;
			}
		}

		.btn {
			width: 107rpx;
			height: 53rpx;
			background: #71B580;
			border-radius: 27rpx;
			font-size: 28rpx;
			font-weight: 400;
			color: #ffffff;
			line-height: 53rpx;
			text-align: center;
		}
	}

	.top-bg {
		background: #fff;
		padding-top: 20rpx;
	}
</style>