增加订单

pages.json

@@ -390,8 +390,11 @@
 				}
 			},{
 				"path":"personal/mycollection"
+			},{
+				"path":"personal/orderList"
+			},{
+				"path":"personal/orderDetail"
 			}]
-			
 		},
 		
 		//抖音商品短视频

pages/school/personal/orderDetail.vue

+<style>
+	.orderDetail {
+		background: #f6f6f6;
+		font-family: 'oswald';
+		padding:0 5px;
+		padding-bottom:60px;
+		height:100%;
+	}
+
+	.orderDetail .orderItem {
+		background-color: #fff;
+		margin-bottom: 10px;
+		padding: 0 15px;
+		border-radius: 10px;
+	}
+
+	.orderDetail .order_big {
+		font-size: 14px;
+		color: #08090E;
+		font-weight: bold;
+	}
+
+	.orderDetail .order_mini {
+		font-size: 11px;
+		color: #919191;
+		margin-top: 10px;
+	}
+
+	.orderDetail .orderCar {
+		display: flex;
+		justify-content: space-between;
+		padding: 30px 0;
+	}
+
+	.orderDetail .order_carImg image {
+		width: 200rpx;
+		height: 130rpx;
+	}
+
+	.orderDetail .order_small {
+		font-size: 14px;
+		color: #919191;
+	}
+
+	.orderDetail .order_GName {
+		width: 100%;
+		height: 50px;
+		border-top: 1px solid rgba(0, 0, 0, 0.03);
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+	}
+
+	.orderDetail .order_dList {
+		border-bottom: 1px solid rgba(0, 0, 0, 0.03);
+		padding: 20px 0;
+	}
+
+	.order_dList:last-child {
+		border-bottom: 0;
+	}
+
+	.orderDetail .order_comLeft {
+		margin-left: 70px;
+	}
+
+	.orderDetail .order_Tprice {
+		display: flex;
+		justify-content: space-between;
+	}
+
+	.order_redPrice {
+		color: #F20707;
+		font-size: 14px;
+	}
+
+	.order_Apply,
+	.order_Sure {
+		width: 50%;
+		text-align: center;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		height: 60px;
+	}
+
+	.orderDetail .order_ImgS {
+		width: 17px;
+		height: 17px;
+		margin-right: 5px;
+	}
+
+	.orderDetail .order_Line {
+		width: 1px;
+		height: 40px;
+		background-color: #e2e2e2;
+	}
+
+	.orderDetail .order_nonBtm {
+		border-bottom: 0 !important;
+	}
+
+	.orderDetail .btn-box {
+		display: flex;
+		flex-direction: row-reverse;
+		height: 60px;
+		padding: 10px 20px;
+		position: fixed;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		z-index: 2;
+		border-top: 1px solid #f5f5f5;
+		background: #fff;
+		display: flex;
+		align-items: center;
+	}
+
+	.order_Btn_Com {
+		padding: 5px 10px;
+		border: 1px solid #888888;
+		border-radius: 14px;
+		color: #888888;
+		font-size: 12px;
+		float: right;
+		margin-right: 15px;
+	}
+</style>
+<template>
+	<view class="orderDetail">
+		<template>
+			<view class="orderItem">
+				<view class="orderCar">
+					<view class="order_carImg">
+						<image mode="aspectFit"/>
+						</image>
+					</view>
+					<view style="width:52%">
+						12321321
+					</view>
+				</view>
+			</view>
+			<view class="orderItem">
+				<view class="order_dList order_Tprice">
+					<text class="order_small">订单编号</text>
+					<text class="order_big" style="margin-left:20px;">123</text>
+				</view>
+				<view class="order_dList order_Tprice">
+					<text class="order_small">下单时间</text>
+					<text class="order_big" style="margin-left:20px;">12334</text>
+				</view>
+				<view class="order_dList order_Tprice">
+					<text class="order_small">支付方式</text>
+					<text class="order_big" style="margin-left:20px;">在线支付</text>
+				</view>
+			</view>
+		</template>
+		<after-sale :list="dataList.DetailList" v-if="showAfter" @close="closeAfterHandler"></after-sale>
+		<u-popup v-model="showModal" mode="center" length="80%">
+			<view style='display: flex;flex-direction: column;align-items: center;background: #fff;'>
+				<view style="display: flex;align-items: center;justify-content: center;height:70px ;">
+					<Text>是否取消订单？</Text>
+				</view>
+				<view style="display: flex;flex-direction: column;height:80px ;margin-left: 15px;width: 100%;" v-if='dataList.OrderStatus==2'>
+					<Text style='margin-left: 10px;margin-top: 5px;'>备注</Text>
+					<input class="uni-input inputM" style='margin-left: 10px;margin-top: 5px;' v-model="Cancelmsg.Remark" placeholder="输入备注" />
+				</view>
+				<view style="display: flex;flex-direction: row;align-items: center;height: 50px;border-top: 1px solid #F5F5F5;width: 100%;">
+					<view style="width: 50%;display: flex;align-items: center;justify-content: center" @click="showModal=false">
+						<Text>取消</Text>
+					</view>
+					<view style="width: 50%;color: #a0cfff;display: flex;align-items: center;justify-content: center" @click="confirm">
+						<Text>确定</Text>
+					</view>
+				</view>
+			</view>
+		</u-popup>
+		<payCom v-if="payBtn" :payInfo="payInfo" @closePay="closePay"></payCom>
+		<u-popup v-model="payExit" mode="center" :mask-close-able="false">
+			<view style="background:#fff;width:500rpx">
+				<view style="padding:10px 0 0 10px">提交失败</view>
+				<view style="text-align:center;padding-bottom:40rpx">
+					<view style="margin:80rpx 0">支付取消</view>
+					<span @click="exitPay" style="padding:10rpx 50rpx;color:#fff;background:#19be6b;border-radius: 12px;">确定</span>
+				</view>
+			</view>
+		</u-popup>
+	</view>
+</template>
+
+<script>
+	import payCom from '@/components/pay/pay';
+	import afterSale from "@/components/userorder/after-sale";
+	export default {
+		components: {
+			afterSale,
+			payCom
+		},
+		data() {
+			return {
+				pageTitle: '订单详情',
+				mainColor: '',
+				msg: {
+					OrderId: 0,
+				},
+				dataList: {},
+				showAfter: false,
+				themCustomStyle: {
+					marginLeft: "20px",
+					padding: "0 2rpx",
+					color: "#FFF",
+				},
+				showModal: false,
+				Cancelmsg: {
+					OrderId: 0,
+					Type: 1,
+					Remark: '',
+				},
+				payInfo: {
+					OpenId: '',
+					OrderId: '',
+					OrderPayType: 1,
+					GoodsName: ''
+				},
+				payBtn: false,
+				payExit: false
+			}
+		},
+		created() {
+			this.mainColor = this.$uiConfig.mainColor;
+		},
+		mounted() {
+			let currentPages = getCurrentPages();
+			let u = "/" + currentPages[currentPages.length - 1].route;
+			let pages = wx.getStorageSync("basedata") ?
+				wx.getStorageSync("basedata").bar_title : [];
+			pages.forEach((x) => {
+				if (x.value == u) {
+					this.pageTitle = x.new_name ? x.new_name : x.name;
+				}
+			});
+			uni.setNavigationBarTitle({
+				title: this.pageTitle,
+			});
+		},
+		onLoad(option) {
+			console.log(option,'optionssss');
+			this.u = uni.getStorageSync("mall_UserInfo");
+			this.msg.OrderId = option.OrderId;
+			this.payInfo.OpenId = uni.getStorageSync('mall_UserInfo').OpenId;
+			this.getData();
+		},
+		methods: {
+			//获取数据
+			getData() {
+				this.request2({
+						url: "/api/AppletEducation/GetAppletGuidecarOrderOrderInfo",
+						data: this.msg,
+					},
+					(res) => {
+						if (res.resultCode == 1) {
+							console.log(res,'数据');
+							this.dataList = res.data;
+						}
+					}
+				);
+			},
+			closeAfterHandler() {
+				this.showAfter = false;
+			},
+			//取消订单
+			cancel() {
+				this.showModal = true;
+				this.Cancelmsg.OrderId = this.dataList.OrderId;
+				this.Cancelmsg.Type = this.dataList.OrderStatus;
+				this.Cancelmsg.Remark = ''
+			},
+			confirm() {
+				let that = this
+				if (that.Cancelmsg.Type == 2 && that.Cancelmsg.Remark == '') {
+					uni.showToast({
+						title: '备注不能为空',
+						icon: 'none'
+					})
+					return
+				}
+				let pages = getCurrentPages(); // 当前页面
+				uni.requestSubscribeMessage({ //订阅消息 退款和审核通知
+					tmplIds: that.dataList.template_message_list,
+					complete(res) {
+						that.request2({
+								url: '/api/AppletOrder/CancelAppletGoodsOrderInfo',
+								data: that.Cancelmsg
+							},
+							(res) => {
+								that.showModal = false;
+								uni.showToast({
+									title: res.message,
+									icon: 'none'
+								})
+								uni.redirectTo({
+									url: "/pages/guidecar/orderList?status=1",
+								});
+
+							}
+						);
+					}
+				})
+			},
+			//支付
+			payment(e) {
+				this.payInfo.OrderId = e.OrderId;
+				this.payInfo.GoodsName = e.DetailList[0].GoodsName.slice(0, 10);
+				this.payInfo.PaymentWay = e.PaymentWay;
+				this.payInfo.total_price = e.Income;
+				this.payBtn = true
+			},
+			closePay() {
+				this.payBtn = false;
+				this.payExit = true;
+			},
+			exitPay() {
+				this.payExit = false;
+			},
+		}
+	}
+</script>