MoeNovaClient/pages/crowdFunding/orderDetail.vue

<template>
	<view class="order-detail-page">
		<!-- 顶部导航栏 -->
		<view class="custom-navbar">
			<view class="navbar-left">
				<text class="fa fa-angle-left" @click="goBack"></text>
			</view>

			<view class="navbar-right scale-tap" @click="goPages('/pages/crowdFunding/customerService')">
				<image src="@/static/crowdFunding/customer-service-btn.png" style="width: 60rpx; height: 60rpx"
					mode="widthFix">
				</image>
			</view>
		</view>
		<!-- status:0待支付，1已支付，2已发货/待收货，3已收货，5已完成，6退款中，8关闭(取消或退款后),9已完成 -->
		<!-- 状态栏 -->
		<view class="status-bar">
			<!-- <image v-if="statusIcon" :src="statusIcon" class="status-icon"/> -->
			<!-- 失败 -->
			<image v-if="status == 8" :src="'../../static/crowdFunding/fail.png'" class="status-icon" />
			<!-- 成功 -->
			<image v-else-if="status == 5 || status == 3 || status == 9" :src="'../../static/crowdFunding/success.png'"
				class="status-icon" />
			<!-- 进行中 -->
			<image v-else-if="status == 2 || status == 6" :src="'../../static/crowdFunding/loading.png'"
				class="status-icon" />

			<text class="status-title">{{ statusTitle }}</text>
		</view>

		<!-- 收货信息 -->
		<view class="address-card scale-tap" @click="goPages('/pages/crowdFunding/receivingAddress')">
			<view class="row">
				<text class="name">{{ address.realname }}</text>
				<text class="mobile">{{ address.mobile }}</text>
				<text class="default" v-if="address.is_default == 'yse'">默认</text>
			</view>
			<view class="address">收获地址：{{ address.area + address.address }}</view>
		</view>

		<!-- 商品卡片 -->
		<view class="product-card">
			<view class="product-top" @click="goPages('/pages/crowdFunding/crowdfundingDetails?id=' + product.id)">
				<image class="product-img" :src="product.img" />
				<view class="product-info">
					<view class="product-title"><text class="two-omit">{{ product.title }} </text>
						<image class="arrow" mode="widthFix" src="@/static/crowdFunding/right.png" />
					</view>
					<view class="product-desc">
						{{ product.desc }}
					</view>
				</view>
			</view>
			<view class="product-bom">
				<view class="product-spec">回报档:￥{{ product.price }} {{ product.spec }}
					<text class="count">x{{ product.count }}</text>
				</view>
				<view class="product-time">
					预计发货时间：{{ product.deliveryTime }}
				</view>
				<!-- <view class="product-tip">{{ product.tip }}</view> -->
			</view>

			<!-- 费用明细 -->
			<!-- <view class="fee-row">
        <text>运费</text>
        <text>包邮</text>
      </view> -->
			<view class="fee-row total">
				<text>总金额</text>
				<text class="total-price">￥{{ product.total }}</text>
			</view>
		</view>

		<!-- 订单信息 -->
		<view class="order-info-card">
			<view class="info-row" v-if="order.orderNo">
				<text>订单编号</text>
				<view><text>{{ order.orderNo }}</text>
					<text class="copy-btn" @click="copy(order.orderNo)">复制</text>
				</view>
			</view>
			<view class="info-row" v-if="order.createTime">
				<text>下单时间</text>
				<text>{{ order.createTime }}</text>
			</view>
			<view class="info-row" v-if="order.payTime">
				<text>付款时间</text>
				<text>{{ order.payTime }}</text>
			</view>
		</view>

		<!-- 底部操作栏 -->
		<view class="order-bottom">
			<template v-if="status == 0">
				<view class="btn scale-tap btn-cancel" @click="cancelOrder">取消订单</view>
				<view class="btn scale-tap btn-pay" @click="payOrder">立即支付</view>
			</template>
			<template v-else-if="status == 1">
				<view class="btn scale-tap btn-refund" @click="refundOrder">申请退款</view>
			</template>
			<template v-else-if="status == 2">
				<view class="btn scale-tap btn-pay" @click="confirmOrder">确认收货</view>
				<!-- <view class="btn scale-tap btn-comment" @click="commentOrder">去评价</view> -->
			</template>
			<template v-else-if="status == 3 || status == 5 || status == 9">
				<view class="btn scale-tap btn-delete" @click="deleteOrder">删除订单</view>
				<!-- <view class="btn scale-tap btn-comment" @click="commentOrder">去评价</view> -->
			</template>
			<template v-else-if="status == 6">
				<view class="btn   btn-delete " style="background: #eee;">退款中</view>
				<!-- <view class="btn scale-tap btn-comment" @click="commentOrder">去评价</view> -->
			</template>
			<template v-else-if="status == 8">
				<!-- <view class="btn   btn-delete" style="background: #eee;">已关闭</view> -->
				<view class="btn scale-tap btn-delete" @click="deleteOrder">删除订单</view>
				<!-- <view class="btn scale-tap btn-comment" @click="commentOrder">去评价</view> -->
			</template>
			<template v-else>
				<!-- <view class="btn scale-tap btn-delete" @click="deleteOrder">删除订单</view> -->
			</template>
		</view>

		<!-- 支付方式选择弹窗 -->
		<uni-popup ref="paymentPopup" type="bottom">
			<view class="payment-popup">
				<view class="popup-header">
					<view class="popup-title">选择支付方式</view>
				</view>
				<view class="payment-options">
					<view class="payment-option" @tap="selectPayment('alipay')">
						<image class="payment-icon" src="../../static/icon/pay_ali.png" mode="aspectFit"></image>
						<view class="payment-name">支付宝支付</view>
						<image class="payment-select"
							:src="paymentMethod === 'alipay' ? '../../static/icon/wd_icon_gouxuan05.png' : '../../static/icon/wd_icon_gouxuan04.png'"
							mode="aspectFit"></image>
					</view>
					<view v-if="isWeChatPay" class="payment-option" @tap="selectPayment('wechat')">
						<image class="payment-icon" src="../../static/icon/pay_wx.png" mode="aspectFit"></image>
						<view class="payment-name">微信支付</view>
						<image class="payment-select"
							:src="paymentMethod === 'wechat' ? '../../static/icon/wd_icon_gouxuan05.png' : '../../static/icon/wd_icon_gouxuan04.png'"
							mode="aspectFit"></image>
					</view>
				</view>
				<view class="confirm-payment" @tap="confirmPayment">立即支付</view>
			</view>
		</uni-popup>
		<!-- 提示框 -->
		<DialogBox ref="DialogBox"></DialogBox>
	</view>
</template>

<script>
export default {
	data() {
		return {
			statusType: "waitPay", // waitPay, waitSend, finish, waitComment, fail
			status: "",
			statusTitle: "", // 根据statusType动态切换
			statusIcon: "loading", // 可根据状态切换icon   loading  fail  success
			address: {},
			product: {},
			order: {},
			paymentMethod: 'alipay', // 默认支付宝支付
			isWeChatPay: true, // 是否显示微信支付选项
			orderId: "",
		};
	},
	onLoad(options) {
		this.getOrderDetail(options.orderId);
		this.orderId = options.orderId;

	},
	methods: {
		goBack() {
			uni.navigateBack();
		},
		goPages(url) {
			uni.navigateTo({
				url
			});
		},

		copy(val) {
			uni.setClipboardData({
				data: val
			});
		},
		cancelOrder() {
			this.$refs["DialogBox"].confirm({
				title: "提示",
				content: "确定要取消订单吗？",
				DialogType: "inquiry",
				btn1: "否",
				btn2: "是",
				animation: 0,
			}).then((res) => {
				if (res) {
					this.orderAction('cancel');
				}
			});
		},
		payOrder() {
			this.$refs.paymentPopup.open();
		},
		selectPayment(method) {
			this.paymentMethod = method;
		},
		confirmPayment() {
			this.orderAction('pay', this.paymentMethod);
			this.$refs.paymentPopup.close();
		},
		refundOrder() {
			this.$refs.DialogBox.confirm({
				title: "提示",
				content: "确定要申请退款吗？",
				DialogType: "inquiry",
				btn1: "否",
				btn2: "是",
				animation: 0,
			}).then((res) => {
				if (res) {
					this.orderAction('refund');
				}
			});
		},
		deleteOrder() {
			this.$refs.DialogBox.confirm({
				title: "提示",
				content: "确定要删除订单吗？",
				DialogType: "inquiry",
				btn1: "否",
				btn2: "是",
				animation: 0,
			}).then((res) => {
				if (res) {
					this.orderAction('del');
				}
			});
		},
		confirmOrder() {
			this.$refs.DialogBox.confirm({
				title: "提示",
				content: "是否要确认收货吗？",
				DialogType: "inquiry",
				btn1: "否",
				btn2: "是",
				animation: 0,
			}).then((res) => {
				if (res) {
					this.orderAction('finish');
				}
			});
		},
		commentOrder() { },
		orderAction(act, payType = '') {

			var order_id = this.orderId; 
			var _this = this;
			console.log({
				order_id,
				act: act,
				payType: payType,
			}, '支付接口参数');
			uni.request({
				url: this.$apiHost + '/Order/action',
				method: 'GET',
				data: {
					order_id: order_id,
					act: act,
					payType: payType,
					uuid: getApp().globalData.uuid,
					skey: getApp().globalData.skey
				},
				success: (res) => {
					console.log(res.data, "订单操作结果");

					if (res.data && res.data.success == 'yes') { 
						// 微信支付
						console.log(payType, "支付方式");
						
						if (payType === 'wx') {
							console.log(res.data.wepay, "微信支付");

							uni.requestPayment({
								provider: "wxpay",
								orderInfo: {
									appid: res.data.wepay.appid,
									partnerid: res.data.wepay.partnerid,
									prepayid: res.data.wepay.prepayid,
									package: "Sign=WXPay",
									noncestr: res.data.wepay.noncestr,
									timestamp: res.data.wepay.timestamp,
									sign: res.data.wepay.sign
								},
								success: (payRes) => {
									that.checkPayStatus();
								},
								fail: (err) => {
									uni.hideLoading();
									that.isSubmitting = false;
									uni.showToast({ title: '支付取消', icon: 'none' });
								}
							});
							return;
						}
						// 支付宝支付
						else if (payType === 'alipay') {
							console.log(res.data.ali_pay, "支付宝支付");
							
							uni.requestPayment({
								provider: "alipay",
								orderInfo: res.data.ali_pay,
								success: (payRes) => {
									that.checkPayStatus();
								},
								fail: (err) => {
									uni.hideLoading();
									
									that.isSubmitting = false;
									uni.showToast({ title: '支付取消', icon: 'none' });
								}
							});
							return;
						}

						uni.showToast({
							title: res.data.str,
							icon: 'none'
						});
						this.getOrderDetail(this.order.orderNo);
						if (act == 'cancel') {
							this.goBack();
						}
					} else {
						uni.showToast({
							title: res.data.message || '操作失败',
							icon: 'none'
						});
					}
				},
				fail: () => {
					uni.showToast({
						title: '操作失败',
						icon: 'none'
					});
				}
			});
		},
		getOrderDetail(orderId) {
			uni.request({
				url: this.$apiHost + '/Order/detail?order_id=' + orderId,
				method: 'GET',
				data: {
					uuid: getApp().globalData.uuid,
					skey: getApp().globalData.skey
				},
				success: (res) => {
					console.log(res.data.data, "获取订单详情");
					if (res.data && res.data.success == 'yes') {
						let data = res.data.data;
						if (data.address) {
							this.address = JSON.parse(data.address);
						}
						this.order = {
							orderNo: data.linkid,
							createTime: data.create_time,
							payTime: data.order_time,
						}
						if (data.crowdfund) {
							this.product = {
								price: data.crowdfund.price,
								img: data.crowdfund.image,
								title: data.crowdfund.title,
								desc: "",
								spec: data.crowdfund.title2,
								count: 1,
								total: data.money,
								deliveryTime: data.crowdfund.delivery,
								id: data.crowdfund.id,
								// tip: "温馨提示：该链接仅购买线下实物卡片！不含线上卡牌壁纸",
							}
						}
						this.status = data.status;
						this.statusTitle = data.status_name;
					}
				},
				fail: () => {
					uni.showToast({
						title: '获取订单详情失败',
						icon: 'none'
					});
				},
				complete: () => {
					uni.hideLoading();
				}
			});
		},
	},
	mounted() {
		// 可根据实际订单状态设置statusType/statusTitle/statusIcon
		// 例如：this.statusType = 'waitPay'; this.statusTitle = '待支付';
	},
};
</script>

<style lang="scss">
.order-detail-page {
	min-height: 100vh;
	background: #f2f6f2;

	.custom-navbar {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		height: 90rpx;
		padding: 0 40rpx;
		padding-right: 30rpx;
		padding-top: var(--status-bar-height);
		background-color: transparent;
		position: sticky;
		top: 0;
		height: calc(90rpx + var(--status-bar-height));
		z-index: 100;

		.navbar-left {
			height: 80rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			.fa-angle-left {
				font-size: 48rpx;
				color: #333;
			}
		}

		.navbar-right {
			width: 60rpx;
			height: 60rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}

	.status-bar {
		display: flex;
		align-items: center;
		padding: 32rpx 32rpx 0 32rpx;

		.status-icon {
			width: 40rpx;
			height: 40rpx;
			margin-right: 12rpx;
		}

		.status-title {
			font-size: 36rpx;
			font-weight: bold;
			color: #1F1F1F;
		}
	}

	.address-card {
		background: #fff;
		border-radius: 16rpx;
		margin: 24rpx 16rpx 0 16rpx;
		padding: 24rpx;
		background: url("../../static/crowdFunding/order-detail-card-bg.png") no-repeat top right / auto 100%,
			#fff;

		.row {
			display: flex;
			align-items: center;
			margin-bottom: 8rpx;

			.name {
				font-size: 30rpx;
				font-weight: bold;
				margin-right: 18rpx;
			}

			.mobile {
				font-size: 30rpx;
				margin-right: 18rpx;
			}

			.default {
				font-size: 22rpx;
				color: #acf934;
				background: #1f1f1f;
				border-radius: 8rpx;
				padding: 2rpx 12rpx;
				margin-right: 12rpx;
			}
		}

		.address {
			font-size: 26rpx;
			color: #666;
		}
	}

	.product-card {
		background: #fff;
		border-radius: 16rpx;
		margin: 24rpx 16rpx 0 16rpx;
		padding: 24rpx;

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

			.product-img {
				width: 120rpx;
				height: 120rpx;
				border-radius: 12rpx;
				margin-right: 18rpx;
			}

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

				.product-title {
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-size: 28rpx;
					font-weight: bold;
					color: #1f1f1f;
					display: flex;
					align-items: center;

					.two-omit {
						width: 400rpx;
					}

					.arrow {
						width: 60rpx;
						height: 60rpx;
						// margin-left: 140rpx;
					}
				}

				.product-desc {
					font-size: 24rpx;
					color: #1F1F1F;
					margin: 8rpx 0;
				}
			}
		}

		.product-bom {
			padding-top: 15rpx;

			.product-spec {
				font-size: 26rpx;
				color: #1F1F1F;
				margin: 8rpx 0;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.count {
					color: #888;
					font-size: 22rpx;
					margin-top: 16rpx;
					margin-top: 8rpx;
				}
			}

			.product-time {
				font-size: 24rpx;
				color: #b2b2b2;
				margin-bottom: 8rpx;
			}

			.product-tip {
				font-size: 26rpx;
				color: #b2b2b2;
				background: #f6faf6;
				border-radius: 8rpx;
				padding: 8rpx 12rpx;
			}
		}

		.arrow {
			width: 32rpx;
			height: 32rpx;
			margin-left: 8rpx;
		}
	}

	.fee-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0;
		height: 64rpx;
		font-size: 28rpx;
		color: #1F1F1F;

		text:first-child {
			color: #999;
		}

		&.total {
			font-weight: bold;
			color: #1f1f1f;
			justify-content: flex-end;

			text:first-child {
				color: #1f1f1f;
			}

			.total-price {
				color: #ff5500;
				font-size: 32rpx;
			}
		}
	}

	.order-info-card {
		background: #fff;
		border-radius: 16rpx;
		margin: 24rpx 16rpx 0 16rpx;
		padding: 24rpx;

		.info-row {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 56rpx;
			font-size: 26rpx;

			>text:first-child {
				color: #999;
			}

			.copy-btn {
				color: #1f1f1f;
				background: #f6faf6;
				border-radius: 8rpx;
				font-size: 24rpx;
				margin-left: 18rpx;
				padding: 2rpx 16rpx;
			}
		}
	}

	.order-bottom {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		background: #fff;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		padding: 0 32rpx;
		height: 110rpx;
		box-shadow: 0 -2rpx 8rpx rgba(0, 0, 0, 0.04);
		z-index: 10;

		.btn {
			min-width: 180rpx;
			height: 72rpx;
			line-height: 72rpx;
			border-radius: 44rpx;
			text-align: center;
			font-size: 30rpx;
			padding: 0 32rpx;
			margin-left: 24rpx;

			&.btn-pay {
				background: #1f1f1f;
				color: #acf934;
			}

			&.btn-cancel {
				background: #fff;
				color: #1f1f1f;
				border: 2rpx solid #e5e5e5;
			}

			&.btn-refund {
				background: #1f1f1f;
				color: #acf934;
			}

			&.btn-delete {
				background: #fff;
				color: #1f1f1f;
				border: 2rpx solid #e5e5e5;
			}

			&.btn-comment {
				background: #1f1f1f;
				color: #acf934;
			}
		}
	}

	.payment-popup {
		background: #fff;
		border-radius: 24rpx 24rpx 0 0;
		padding: 32rpx;

		.popup-header {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 32rpx;

			.popup-title {
				font-size: 32rpx;
				font-weight: bold;
				color: #1f1f1f;
			}
		}

		.payment-options {
			.payment-option {
				display: flex;
				align-items: center;
				padding: 24rpx 0;
				border-bottom: 2rpx solid #f6faf6;

				.payment-icon {
					width: 48rpx;
					height: 48rpx;
					margin-right: 18rpx;
				}

				.payment-name {
					flex: 1;
					font-size: 30rpx;
					color: #1f1f1f;
				}

				.payment-select {
					width: 32rpx;
					height: 32rpx;
				}
			}
		}

		.confirm-payment {
			margin-top: 32rpx;
			background: #1f1f1f;
			color: #acf934;
			border-radius: 44rpx;
			font-size: 32rpx;
			font-weight: bold;
			height: 88rpx;
			line-height: 88rpx;
			text-align: center;
		}
	}

	.btn-delete {
		background: #f6faf6;
		color: #888;
		border: 1px solid #e5e5e5;
	}
}
</style>