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; 
				console.log(this.order);
				if(act == "pay"){
					order_id = this.order.orderNo;
				} 
				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') {
							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>