auto commit

common/apiurl.js

@@ -28,6 +28,13 @@ const apiurl = {
 	mycarsUrl:'/membervehicle',
 	// 设置为默认车辆
 	setDefaultCarUrl:'/membervehicle/modifyDefault/',
+	
+	// 获取订单列表
+	getOrderListUrl:'/orderinfo',
+	// 获取支付订单详情
+	getOrderinfoUrl:'/orderinfo/paydetail/',
+	// 获取订单详情
+	getOrderDetailUrl:'/orderinfo/detail/',
 }
 
 export {

common/http.api.js

@@ -30,6 +30,10 @@ const install = (Vue, vm) => {
 	let delCar = (params = {}) => vm.$u.delete(apiurl.mycarsUrl+'/'+params);
 	let setDefaultCar = (params = {}) => vm.$u.put(apiurl.setDefaultCarUrl+params.id);
 	
+	let getOrderList = (params = {}) => vm.$u.get(apiurl.getOrderListUrl,params);
+	let getOrderinfo = (params = {}) => vm.$u.get(apiurl.getOrderinfoUrl+params.id);
+	let getOrderDetail = (params = {}) => vm.$u.get(apiurl.getOrderDetailUrl+params.id);
+	
 	
 	// 将各个定义的接口名称，统一放进对象挂载到vm.$u.api(因为vm就是this，也即this.$u.api)下
 	vm.$u.api = {
@@ -46,7 +50,10 @@ const install = (Vue, vm) => {
 		addCar,
 		delCar,
 		setDefaultCar,
-		roadInfoById
+		roadInfoById,
+		getOrderinfo,
+		getOrderList,
+		getOrderDetail
 	};
 }
 

manifest.json

@@ -62,7 +62,8 @@
                 "geolocation" : {},
                 "push" : {
                     "unipush" : {}
-                }
+                },
+                "ad" : {}
             }
         }
     },

pages.json

@@ -22,6 +22,19 @@
 				"navigationBarTitleText": "手机号登录"
 			}
 		},
+		{
+			"path": "pages/center/order/order",
+			"style": {
+				"navigationBarTitleText": "停车列表"
+			}
+		},
+		{
+			"path": "pages/center/order/orderDetails/orderDetails",
+			"style": {
+				// "navigationStyle":"custom",// 隐藏系统导航栏
+				"navigationBarTitleText": "订单详情"
+			}
+		},
 		{
 			"path": "pages/parkingLists/parkingLists",
 			"style": {
@@ -34,6 +47,13 @@
 				"navigationStyle":"custom",// 隐藏系统导航栏
 				"navigationBarTitleText": "我的车辆"
 			}
+		},		
+		{
+			"path": "pages/payPage/payPage",
+			"style": {
+				// "navigationStyle":"custom",// 隐藏系统导航栏
+				"navigationBarTitleText": "停车记录"
+			}
 		}
 	],
 	"globalStyle": {

pages/center/index.vue

@@ -15,13 +15,14 @@
 		
 		<view class="u-m-t-20">
 			<u-cell-group>
-				<u-cell-item icon="star" title="我的车辆" @click="openPage('pages/myCars/myCars')"></u-cell-item>
+				<u-cell-item icon="car" title="我的车辆" @click="openPage('pages/myCars/myCars')"></u-cell-item>
+				<u-cell-item icon="order" title="停车记录" @click="openPage('pages/center/order/order')"></u-cell-item>
 			</u-cell-group>
 		</view>
 		
 		<view class="u-m-t-20">
 			<u-cell-group>
-				<u-cell-item icon="star" title="手机号登录" @click="openPage('/pages/center/phoneLogin/phoneLogin')"></u-cell-item>
+				<u-cell-item icon="phone" title="手机号登录" @click="openPage('/pages/center/phoneLogin/phoneLogin')"></u-cell-item>
 				<!-- <u-cell-item icon="star" title="微信支付" @click="handlewxpay"></u-cell-item> -->
 			</u-cell-group>
 		</view>

pages/center/order/order.scss

@@ -0,0 +1,57 @@
+.swiper-wrap{
+	display: flex;
+	flex-direction: column;
+	height: calc(100vh - var(--window-top));
+	width: 100%;
+	.swiper-box {
+		flex: 1;
+	}
+}
+.page-box{
+	margin: 25rpx 40rpx;
+	.order{
+		overflow: hidden;
+		margin-bottom: 20rpx;
+		background-color: #fff;
+		border-radius: 15rpx;
+		.order-top{
+			margin-bottom: 31rpx;
+			padding: 25rpx 40rpx;
+			border-bottom: 1px solid #DFDFDF;
+			.car{
+				font-size: 32rpx;
+				font-weight: 600;
+				color: #3A3A3A;
+				line-height: 45rpx;
+				letter-spacing: 1px
+			}
+			.addr{
+				color: #858585;
+				font-size: 26rpx;
+				line-height: 37rpx;
+			}
+			.order-top-right{
+				padding: 0 15rpx;
+				height: 50rpx;
+				line-height: 48rpx;
+				border-radius: 5rpx;
+				border: 1px solid #FA6400;
+				color: #FA6400;
+			}
+		}
+		.order-center{
+			padding: 0 40rpx 25rpx;
+			border-bottom: 1px solid #DFDFDF;
+			.order-center-item{
+				font-size: 26rpx;
+				font-weight: 400;
+				color: #595959;
+				line-height: 37rpx;
+				letter-spacing: 1px;
+				.pay-amount{
+					color: #FA6400;
+				}
+			}
+		}
+	}
+}

pages/center/order/order.vue

@@ -0,0 +1,176 @@
+<template>
+	<view>
+		<view class="swiper-wrap">
+			<view class="u-tabs-box">
+				<u-tabs-swiper activeColor="#008CFF" ref="tabs" :list="list" :current="current" @change="change" :is-scroll="false" swiperWidth="100%"></u-tabs-swiper>
+			</view>
+			<swiper class="swiper-box" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
+				<swiper-item class="swiper-item" v-for="(item, index) in list" :key="index">
+					<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom">
+						<view class="page-box">
+							<view class="order" @click="goDetails(orderItem.id)" v-for="(orderItem, index) in  orderList[index]" :key="orderItem.id">
+								<view class="order-top u-flex">
+									<view class="order-top-left u-flex-1">
+										<view class="car">{{orderItem.vehicleNo}}</view>
+										<view class="addr">{{orderItem.roadName}}</view>
+									</view>
+									<view class="order-top-right">{{orderItem.orderStatus | verifyStatusFilter}}</view>
+								</view>
+								<view class="order-center">
+									<view class="order-center-item">订单编号：{{orderItem.orderId}}</view>
+									<view class="order-center-item">入场时间：{{orderItem.inTime}}</view>
+									<view class="order-center-item">出场时间：{{orderItem.outTime}}</view>
+									<view class="order-center-item">停留时间：{{orderItem.duration}}</view>
+									<view class="order-center-item">应付金额：<span class="pay-amount">{{orderItem.payAmount}}</span></view>
+								</view>
+								<view class="order-bottom">
+									<u-cell-item title="收费标准"></u-cell-item>
+								</view>
+							</view>
+							<u-loadmore :status="loadStatus[index]" bgColor="#F6F6FF"></u-loadmore>
+						</view>
+					</scroll-view>
+				</swiper-item>
+			</swiper>
+		</view>
+		
+		<u-toast ref="uToast" />
+	</view>
+</template>
+
+<script>
+export default {
+	data() {
+		return {
+			orderList: [[], [], [], []],
+			list: [
+				{index:0,name: '全部',orderStatu:null,pageNum:1,total:null},
+				{index:1,name: '未出场',orderStatu:1,pageNum:1,total:null},
+				{index:2,name: '缴费中',orderStatu:2,pageNum:1,total:null},
+				{index:3,name: '已完成',orderStatu:4,pageNum:1,total:null}
+			],
+			current: 0,
+			swiperCurrent: 0,
+			tabsHeight: 0,
+			dx: 0,
+			loadStatus: ['loadmore','loadmore','loadmore','loadmore'],
+		};
+	},
+	onLoad() {
+		this.getOrderList(this.list[0]);
+		// this.getOrderList(this.list[1]);
+		// this.getOrderList(this.list[2]);
+		// this.getOrderList(this.list[3]);
+	},
+	computed: {
+		// 价格小数
+		priceDecimal() {
+			return val => {
+				if (val !== parseInt(val)) return val.slice(-2);
+				else return '00';
+			};
+		},
+		// 价格整数
+		priceInt() {
+			return val => {
+				if (val !== parseInt(val)) return val.split('.')[0];
+				else return val;
+			};
+		}
+	},
+	methods: {
+		reachBottom() {
+			// console.log('this.list[this.current]',this.list[this.current]);
+			if(this.orderList[this.current].length>=this.list[this.current].total){
+				this.loadStatus.splice(this.list[this.current].index,1,"nomore");
+				return;
+			};
+			this.loadStatus.splice(this.list[this.current].index,1,"loading");
+			this.getOrderList(this.list[this.current]);
+		},
+		// 页面数据
+		
+		getOrderList(orderType) {			
+			let param = {
+				pageNum:orderType.pageNum,
+				orderStatus:orderType.orderStatu,
+			};
+			// 未出场: orderStatu = 1-停放中
+			// 缴费中: orderStatu = 2-出场中  && payStatus = 2-支付中 
+			// 完成:   orderStatu = 4-完成
+			this.$u.api.getOrderList(param)
+			.then(res=>{
+				for(let item of res.data.rows){
+					this.orderList[orderType.index].push(item);
+				}
+				console.log('this.list[orderType.index]',this.list[orderType.index]);
+				this.list[this.current].total = res.data.total;
+				this.list[orderType.index].pageNum++;
+				if(this.orderList[this.current].length>=this.list[this.current].total){
+					this.loadStatus.splice(this.list[orderType.index].index,1,"nomore");
+				};
+				console.log(JSON.parse(JSON.stringify(this.orderList[this.swiperCurrent])));
+				console.log('this.list[this.current]',this.list[this.current]);
+			}).catch(err=>{
+				this.$refs.uToast.show({
+					title: err.msg,
+					type: 'error',
+				});
+				console.log('getOrderList ',err)
+			});
+			
+			this.loadStatus.splice(this.current,1,"loadmore")
+		},
+		// tab栏切换
+		change(index) {
+			// this.swiperCurrent = this.list[index].orderStatu;
+			this.swiperCurrent = index;
+			this.getOrderList(this.list[index]);
+		},
+		transition({ detail: { dx } }) {
+			this.$refs.tabs.setDx(dx);
+		},
+		animationfinish({ detail: { current } }) {
+			this.$refs.tabs.setFinishCurrent(current);
+			this.swiperCurrent = current;
+			this.current = current;
+		},
+		goDetails(id){
+			this.$u.route({
+				url: 'pages/center/order/orderDetails/orderDetails',
+				params: {
+					orderId: id
+				}
+			});
+		}
+	},
+	filters:{
+		verifyStatusFilter(value) {
+			if (value === 0) {
+			  return '';
+			} else if(value === 1){
+				return '未出场';				
+			} else if(value === 2){
+				return '缴费中';				
+			} else if(value === 4){
+				return '已完成';				
+			} else {
+			  return '';
+			}
+		},
+	}
+};
+</script>
+
+<style>
+/* #ifndef H5 */
+page {
+	height: 100%;
+	background-color: #F6F6FF;
+}
+/* #endif */
+</style>
+
+<style lang="scss" scoped>
+	@import "./order.scss";
+</style>

pages/center/order/orderDetails/orderDetails.scss

@@ -0,0 +1,27 @@
+.order-info{
+	.u-cell{
+		padding: 17rpx 0;
+	}
+	/deep/ .u-cell_title{font-weight: 600;}
+}
+.order-info-img{
+	margin: 54rpx auto 10rpx;
+}
+.addr{
+	text-align: center;
+	margin-bottom: 10rpx;
+	font-size: 26rpx;
+	font-weight: 400;
+	color: #737373;
+	line-height: 37rpx;
+	letter-spacing: 1px;
+}
+.pay-amount{
+	text-align: center;
+	font-size: 60rpx;
+	font-weight: 500;
+	color: #010101;
+	line-height: 84rpx;
+	letter-spacing: 2px;
+	margin-bottom: 18rpx;
+}

pages/center/order/orderDetails/orderDetails.vue

@@ -0,0 +1,94 @@
+<template>
+	<view class="wrap">
+		<view class="order-info">
+			<u-image class="order-info-img" width="90rpx" height="90rpx" src="../../../../static/img/position.png"></u-image>
+			<view class="addr">{{orderInfo.roadName}}</view>
+			<view class="pay-amount">-{{orderInfo.payAmount}}</view>
+			<u-cell-group :border="false">
+				<u-cell-item title="车牌号" :arrow="false" :border-bottom="false" :border-top="false" :value="orderInfo.vehicleNo"></u-cell-item>
+				<u-cell-item title="优惠总金额" :arrow="false" :border-bottom="false" :border-top="false" :value="orderInfo.preferentialAmount"></u-cell-item>
+			</u-cell-group>
+			<u-cell-group>
+				<u-cell-item title="订单编号 " :arrow="false" :border-bottom="false" :border-top="false" :value="orderInfo.vehicleNo"></u-cell-item>
+				<u-cell-item title="入场时间 " :arrow="false" :border-bottom="false" :border-top="false" :value="orderInfo.inTime"></u-cell-item>
+				<u-cell-item title="停车时长 " :arrow="false" :border-bottom="false" :border-top="false" :value="orderInfo.duration"></u-cell-item>
+				<u-cell-item title="出场时间 " :arrow="false" :border-bottom="false" :border-top="false" :value="orderInfo.outTime"></u-cell-item>
+				<u-cell-item v-if="orderInfo.createTime" title="订单创建时间 " :arrow="false" :border-bottom="false" :border-top="false" :value="orderInfo.createTime"></u-cell-item>
+				<u-cell-item v-if="orderInfo.payTime" title="支付时间 " :arrow="false" :border-bottom="false" :border-top="false" :value="orderInfo.payTime"></u-cell-item>
+				<u-cell-item title="缴费方式 " :arrow="false" :border-bottom="false" :border-top="false" :value="orderInfo.paySource | verifyPaySource"></u-cell-item>
+			</u-cell-group>
+		</view>
+		<view class="bottom-btn-wrap" v-if="orderInfo.payStatus!=1">
+			<view class="bottom-btn" @click="goPay(orderId)">去支付</view>
+		</view>
+		
+		<u-toast ref="uToast" />
+	</view>
+</template>
+
+<script>
+	import getUrlParams from "../../../../utils/getUrlParams.js";
+	export default{
+		data(){
+			return{
+				orderId:null,
+				orderInfo:[],
+				
+			}
+		},
+		onLoad(){
+			let locationLocaturl = window.location.hash;
+			this.orderId = getUrlParams(locationLocaturl,"orderId"); // 截取orderId
+			console.log('this.orderId',this.orderId);
+			this.handleGetOrderinfo(this.orderId);
+			
+		},
+		methods:{
+			handleGetOrderinfo(orderId){
+				this.$u.api.getOrderDetail({id:orderId})
+				.then(res=>{
+					// this.$refs.uToast.show({
+					// 	title: res.msg,
+					// 	type: 'success',
+					// });
+					this.orderInfo = res.data;
+					console.log('handleGetOrderinfo',JSON.parse(JSON.stringify(res.data)));
+				}).catch(err=>{
+					this.$refs.uToast.show({
+						title: err.msg,
+						type: 'error',
+					});
+					console.log('handleGetOrderinfo ',err)
+				});
+				
+			},
+			goPay(orderId){
+				this.$u.route({
+					url: 'pages/payPage/payPage',
+					params: {
+						orderId: orderId
+					}
+				});
+			},	
+			
+			
+		},
+		filters:{
+			verifyPaySource(value) {
+				if (value === 0) {
+				  return '未支付';
+				}else if(value === 1){
+					return '微信支付';				
+				} else if(value === 2){
+					return '支付宝支付';				
+				}else {
+				  return '';
+				}
+			},
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	@import "./orderDetails.scss";
+</style>

pages/index/index.scss

@@ -133,6 +133,7 @@ page{background-color: $my-page-bg-color;}
 		dt{
 			width: 150rpx;
 			color: #A3A3A3;
+			text-align: right;
 		}
 		dd{
 			flex: 1;

pages/index/index.vue

@@ -1,6 +1,6 @@
 <template>
 	<view>
-		<u-navbar :is-back='false' :border-bottom="false" :background="{ background: '#008CFF' }" title=""></u-navbar>
+		<!-- <u-navbar :is-back='false' :border-bottom="false" :background="{ background: '#008CFF' }" title=""></u-navbar> -->
 		<view class="header-bar">
 			<view class="city" @click="handleCitySelect">
 				{{city}}<u-icon name="arrow-down" color="#fff" size="32"></u-icon>
@@ -72,7 +72,7 @@
 							</view>
 						</view>	
 						<view class="go-pay-wrap">
-							<view class="go-pay" @click="handlewxpay">去支付</view>
+							<view class="go-pay" @click="goPay(item.id)">去支付</view>
 						</view>
 						
 					</view>
@@ -180,75 +180,18 @@
 					}
 					this.orderList = res.data.orderList;
 				}).catch(err=>{
-					alert(err.msg);
+					// alert(err.msg);
 					console.log('getIndexData err',err)
 				});
 			},
-			getCode () {
-				var local = window.location.href // 获取页面url
-				let locationLocaturl = window.location.search;
-				this.code = getUrlParams(locationLocaturl,"code"); // 截取code
-				if (this.code == null || this.code === '') { // 如果没有code，则去请求
-					window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${this.config.wxAppid}&redirect_uri=${encodeURIComponent(local)}&response_type=code&scope=snsapi_userinfo&#wechat_redirect`
-				} else {
-					this.handleGetWXInfo(this.code) //把code传给后台获取用户信息
-				}
-			},
-			handleGetWXInfo (code) { // 通过code获取 openId等用户信息，/api/user/wechat/login 为后台接口
-				let _this = this
-				this.$u.api.getWXInfo(code).then((res) => {
-					if (res.code === 200 ) {
-						this.$u.vuex('vuex_wxinfo',res.data);
-						// 继续支付
-					}
-				}).catch((err) => {
-					this.$refs.uToast.show({
-						title: err.msg,
-						type: 'error',
-					});
-				})
-			},			
-			handlewxpay(){;
-				if(!this.$store.state.vuex_wxinfo.openId){ // 如果微信openId，则需用code去后台获取
-					this.$refs.uToast.show({
-						title: '请登录后重试!',
-						type: 'info',
-						// url: '/pages/user/index'
-					});
-					this.getCode();
-				} else {
-					// 别的业务逻辑
-					this.getWXPay();
-				}
-			},
-			async getWXPay(id){
-				let params = {
-					orderId:id||new Date().getTime(),
-					openid:this.$store.state.vuex_wxinfo.openId,
-					tradeType:"test"
-				};
-				await this.$wxApi.config();
-				this.$pay.wxPay(params).then(res =>{
-					console.log('wxPay',res.code);
-					if(res.code == 0){
-						// 成功
-						// uni.reLaunch({
-						// 	url: '/pages/buySuccess/buySuccess?orderId=' + params.orderId
-						// })
-					}else if(res.code == 1){
-						// 取消
-						// uni.redirectTo({
-						// 	url: '/pages/userCenter/myOrder/myOrder'
-						// })
-					}else if(res.code == 2){
-						this.$refs.uToast.show({
-							title: '支付失败，请检查!',
-							type: 'error',
-							// url: '/pages/user/index'
-						});
+			goPay(orderId){
+				this.$u.route({
+					url: 'pages/payPage/payPage',
+					params: {
+						orderId: orderId
 					}
 				});
-			},
+			},			
 			//
 			onRoadInfo(item){
 				this.$u.api.roadInfoById({id:item.roadId})
@@ -261,7 +204,7 @@
 				
 					this.showOrderDetails = true;
 				}).catch(err=>{
-					alert(err.msg);
+					// alert(err.msg);
 					console.log('getIndexData err',err)
 				});
 			}

pages/payPage/payPage.scss

@@ -0,0 +1,98 @@
+.order-info{
+	margin-top: 50rpx;
+	margin-bottom: 75rpx;
+	.order-info-top{
+		position: relative;
+		border-top-left-radius: 20rpx;
+		border-top-right-radius: 20rpx;
+		color: #fff;
+		padding: 35rpx 40rpx;
+		background: linear-gradient(135deg, #00BFFF 0%, #008DFF 100%);
+		.addr{
+			margin-bottom: 16rpx;
+			.addr-text{
+				margin-left: 17rpx;
+				font-size: 24rpx;
+				font-weight: 400;
+			}
+		}
+		.car{
+			.car-no{
+				font-size: 40rpx;
+				font-weight: 500;
+				color: #FFFFFF;
+				letter-spacing: 1px;
+				line-height: 56rpx;
+				margin-right: 13rpx;
+			}
+			.car-type{
+				font-size: 24rpx;
+			}
+		}
+		.time{
+			font-size: 22rpx;
+			font-weight: 400;
+			color: #CDECFF;
+			line-height: 30rpx;
+			margin-bottom: 3rpx;
+		}
+		.duration{
+			margin-top: 17rpx;
+			font-size: 30rpx;
+			font-weight: 400;
+			color: #FFFFFF;
+			line-height: 42rpx;
+			letter-spacing: 1px;
+		}
+		.total-amount{
+			position: absolute;
+			right: 40rpx;
+			bottom: 25rpx;
+			font-size: 60rpx;
+			font-weight: 500;
+			color: #FFFFFF;
+			letter-spacing: 2rpx;
+		}
+	}
+	.order-info-bottom{
+		padding-top: 44rpx;
+		padding-bottom: 56rpx;
+		background: #FFFFFF;
+		border-bottom-left-radius: 20rpx;
+		border-bottom-right-radius: 20rpx;
+		box-shadow: 0px 6rpx 14rpx 0px rgba(200, 200, 200, 0.5);
+		.u-cell{padding-left: 40rpx;padding-right: 40rpx;}
+		/deep/ .u-iconfont{color: #D8D8D8;}
+		.pay-amount{
+			border-top: 1px solid #CACACA;
+			padding-top: 33rpx;
+			padding: 33rpx 40rpx 9rpx;
+			color: #FF751D;
+			.title{
+				font-size: 30rpx;
+				font-weight: 600;
+				color: #FF751D;
+				line-height: 42rpx;
+				letter-spacing: 1px;
+			}
+			.amount{
+				font-size: 36rpx;
+				font-weight: 600;
+				color: #FF8233;
+				line-height: 33rpx;
+				letter-spacing: 1px;
+				.rmb{
+					font-size: 24rpx;
+					margin-right: 5rpx;
+				}
+			}
+		}
+		.tip{
+			font-size: 22rpx;
+			font-weight: 400;
+			color: #999999;
+			line-height: 30rpx;
+			padding: 0 40rpx;
+		}
+	}
+}

pages/payPage/payPage.vue

@@ -0,0 +1,150 @@
+<template>
+	<view class="wrap">
+		<view class="order-info">
+			<view class="order-info-top">
+				<view class="addr u-flex">
+					<u-icon name="map-fill" color="#fff" size="28"></u-icon>
+					<view class="addr-text">{{orderInfo.roadName}}</view>
+				</view>
+				<view class="car u-flex">
+					<view class="car-no">{{orderInfo.vehicleNo}}</view>
+					<view class="car-type">临时车</view>
+				</view>
+				<view class="time in-time">进场时间：{{orderInfo.inTime}}</view>
+				<view class="time out-time">进场时间：{{orderInfo.outTime}}</view>
+				<view class="duration">已停放 {{orderInfo.duration}}</view>
+				<view class="total-amount">¥{{orderInfo.totalAmount}}</view>
+			</view>
+			<view class="order-info-bottom">
+				<u-cell-item 
+				center 
+				:border-bottom="false" 
+				:value="orderInfo.preferentialAmount" 
+				:title-style="{color:'#8A8A8A'}"
+				:icon-style="{color:'#D8D8D8'}"
+				title="已优惠"></u-cell-item>
+				<view class="pay-amount u-flex u-row-between">
+					<view class="title">应付金额</view>
+					<view class="amount"><span class="rmb">¥</span>{{orderInfo.payAmount}}</view>
+				</view>
+				<view class="tip">停车费不超过30元，可先离场后在付费</view>
+			</view>
+		</view>
+		<view class="bottom-btn static" @click="handlewxpay">去支付</view>
+		
+		<u-toast ref="uToast" />
+	</view>
+</template>
+
+<script>
+	import getUrlParams from "../../utils/getUrlParams.js";
+	export default{
+		data(){
+			return{
+				orderId:null,
+				orderInfo:[],
+				
+			}
+		},
+		onLoad(){
+			let locationLocaturl = window.location.hash;
+			this.orderId = getUrlParams(locationLocaturl,"orderId"); // 截取orderId
+			console.log('this.orderId',this.orderId);
+			this.handleGetOrderinfo(this.orderId);
+			
+		},
+		methods:{
+			handleGetOrderinfo(orderId){
+				this.$u.api.getOrderinfo({id:orderId})
+				.then(res=>{
+					// this.$refs.uToast.show({
+					// 	title: res.msg,
+					// 	type: 'success',
+					// });
+					this.orderInfo = res.data;
+					console.log('handleGetOrderinfo',JSON.parse(JSON.stringify(res)));
+				}).catch(err=>{
+					this.$refs.uToast.show({
+						title: err.msg,
+						type: 'error',
+					});
+					console.log('handleGetOrderinfo ',err)
+				});
+				
+			},
+			getCode () {
+				var local = window.location.href // 获取页面url
+				let locationLocaturl = window.location.search;
+				this.code = getUrlParams(locationLocaturl,"code"); // 截取code
+				if (this.code == null || this.code === '') { // 如果没有code，则去请求
+					window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${this.config.wxAppid}&redirect_uri=${encodeURIComponent(local)}&response_type=code&scope=snsapi_userinfo&#wechat_redirect`
+				} else {
+					this.handleGetWXInfo(this.code) //把code传给后台获取用户信息
+				}
+			},
+			handleGetWXInfo (code) { // 通过code获取 openId等用户信息，/api/user/wechat/login 为后台接口
+				let _this = this
+				this.$u.api.getWXInfo(code).then((res) => {
+					if (res.code === 200 ) {
+						this.$u.vuex('vuex_wxinfo',res.data);
+						// 继续支付
+					}
+				}).catch((err) => {
+					this.$refs.uToast.show({
+						title: err.msg,
+						type: 'error',
+					});
+				})
+			},			
+			handlewxpay(){;
+				if(!this.$store.state.vuex_wxinfo.openId){ // 如果微信openId，则需用code去后台获取
+					this.$refs.uToast.show({
+						title: '请登录后重试!',
+						type: 'info',
+						// url: '/pages/user/index'
+					});
+					this.getCode();
+				} else {
+					// 别的业务逻辑
+					this.getWXPay();
+				}
+			},
+			async getWXPay(id){
+				let params = {
+					orderId:this.orderId,
+					openid:this.$store.state.vuex_wxinfo.openId,
+					tradeType:"test"
+				};
+				await this.$wxApi.config();
+				this.$pay.wxPay(params).then(res =>{
+					console.log('wxPay',res.code);
+					if(res.code == 0){
+						// 成功
+						this.$u.route({
+							url:'pages/index/index',
+							// params: {
+							// 	keyword: this.keyword
+							// }
+						});
+					}else if(res.code == 1){
+						// 取消
+						// uni.redirectTo({
+						// 	url: '/pages/userCenter/myOrder/myOrder'
+						// })
+					}else if(res.code == 2){
+						this.$refs.uToast.show({
+							title: '支付失败，请检查!',
+							type: 'error',
+							// url: '/pages/user/index'
+						});
+					}
+				});
+			},
+			
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	@import "./payPage.scss";
+</style>

pay.js

@@ -24,6 +24,7 @@ export default {
 					//#endif
 					this.payError(res);
 				}).catch(err =>{
+					alert(err.msg);
 					console.log('pay err',err);
 				})
 		});

uni.scss

@@ -4,3 +4,27 @@
  */
 @import 'uview-ui/theme.scss';
 .wrap{margin: 0 40rpx;position: relative;}
+
+.bottom-btn-wrap{
+	height: 155rpx;
+}
+.bottom-btn{
+	position: fixed;
+	left: 40rpx;
+	right: 40rpx;
+	bottom: 47rpx;
+	height: 85rpx;
+	line-height: 85rpx;
+	background: #3397FA;
+	box-shadow: 0px 9rpx 9rpx 0px rgba(0, 0, 0, 0.03);
+	border-radius: 10rpx;
+	text-align: center;
+	font-size: 28rpx;
+	font-weight: 500;
+	color: #FFF;
+	letter-spacing: 1px;
+	z-index: 99;
+}
+.bottom-btn.static{
+	position: static;
+}

unpackage/resources/__UNI__DE5C136/www/__uniappview.html

@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+
+  <head>
+    <meta charset="UTF-8" />
+    <script>
+      var __UniViewStartTime__ = Date.now();
+      var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') ||
+        CSS.supports('top: constant(a)'))
+      document.write(
+        '<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' +
+        (coverSupport ? ', viewport-fit=cover' : '') + '" />')
+    </script>
+    <title>View</title>
+    <link rel="stylesheet" href="view.css" />
+  </head>
+
+  <body>
+    <div id="app"></div>
+    <script src="__uniappes6.js"></script>
+    <script src="view.umd.min.js"></script>
+    <script src="app-view.js"></script>
+  </body>
+
+</html>