1.历史消费，列表。详情

2.我的

components/nodata/nodata.vue

@@ -0,0 +1,47 @@
+<template>
+	<view class="" style="padding-bottom: 20rpx;">
+		
+		<view  class="nodataBox">
+			<image src="../../static/img/nodata.png" mode="widthFix" class="nodataImg"></image>
+			<view class="noTxt">暂无数据</view>
+		</view>
+		
+		
+	</view>
+</template>
+
+<script>
+export default {
+	data() {
+		return {
+			
+		}
+	},
+	onLoad(opt) {
+      
+	},
+	onShow() {
+		
+	},
+	methods: {
+		
+	}
+}
+</script>
+
+<style scoped>
+	
+	.nodataImg{
+	  width: 400rpx;
+	  padding-top: 100rpx;
+	}
+	.noTxt{
+		font-size: 32rpx;
+		color: #999999;
+		padding-top: 50rpx;
+	}
+	.nodataBox{
+		text-align: center;
+	}
+	
+</style>

pages.json

@@ -1,5 +1,15 @@
 {
 	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
+		
+		// ,{
+		//     "path" : "pages/user/historySpend",
+		//     "style" :                                                                                    
+		//     {
+		//         "navigationBarTitleText": "历史消费",
+		//         "enablePullDownRefresh": true
+		//     }
+		    
+		// },
 		{
 			"path": "pages/index/index",
 			"style": {
@@ -9,10 +19,20 @@
 		{
 			"path": "pages/user/user",
 			"style": {
-				"navigationBarTitleText": "uni-app"
+				"navigationStyle": "custom",
+				"enablePullDownRefresh": true
 			}
 		}
-	],
+	    ,{
+            "path" : "pages/user/historySpend",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "历史消费",
+                "enablePullDownRefresh": true
+            }
+            
+        }
+    ],
 	"tabBar": {
 		"color": "#8a8a8a",
 		"selectedColor": "#FF4F00",

pages/user/historyDetail.vue

@@ -0,0 +1,945 @@
+<template>
+	<view class="box">
+
+		<view class="top">
+			<view class="orderState">
+				<image src="../../static/img/icon_order_def.png" mode="" style="width: 44rpx;height: 44rpx;"></image>
+				<view class="SheetState">已结算</view>
+				<view class="SheetState" v-if="orderData.SheetState==1">已结算</view>
+				<view class="SheetState" v-if="orderData.SheetState==2">未结算</view>
+			</view>
+
+
+		</view>
+
+		<!-- 店铺信息 -->
+		<view class="shopBox">
+			<image src="../../static/img/icon_store.png" mode="" class="shopBoximg"></image>
+			<view class="shopCont">
+				<view class="shopName">{{orderData.ShopName}}这是门店名称</view>
+				<view class="Address">江苏省南京市鼓楼区铁路南街233
+					{{orderData.ProvinceName}}{{orderData.CityName}}{{orderData.AreaName}}{{orderData.Address}}
+				</view>
+
+			</view>
+			<view class="shopRightBox" @click="map">
+
+				<image src="../../static/img/icon_ditu.png" mode="" class="shopRightImg"></image>
+
+				<view class="shopRihgtTxt">地图</view>
+			</view>
+			<view class="shopsx"></view>
+			<view class="shopRightBox" @click="call">
+
+				<image src="../../static/img/icon_phone.png" mode="" class="shopRightImg"></image>
+
+				<view class="shopRihgtTxt">电话</view>
+			</view>
+		</view>
+
+
+		<!-- 订单信息 -->
+		<view class="information">
+			<view class="carMes">
+				<view class="plate">鲁A12345</view>
+				<view class="mileage">1000km</view>
+			</view>
+			<view class="informationLine">
+				<view class="informationTxt">姓名：</view>
+				<view class="informationNum">{{orderData.Code}}</view>
+			</view>
+			<view class="informationLine">
+				<view class="informationTxt">手机号：</view>
+				<view class="informationNum">{{orderData.MemberName}}</view>
+			</view>
+			<view class="informationLine">
+				<view class="informationTxt">单号：</view>
+				<view class="informationNum">{{orderData.CreateTime}}</view>
+			</view>
+			<view class="informationLine">
+				<view class="informationTxt">接车时间：</view>
+				<view class="informationNum">{{orderData.Comment}}</view>
+			</view>
+			<view class="informationLine">
+				<view class="informationTxt">服务顾问：</view>
+				<view class="informationNum" v-if="orderData.ConfirmTime != null">{{orderData.ConfirmTime}}</view>
+			</view>
+
+		</view>
+
+		<!-- 项目明细 -->
+		<view class="detailedBox itemBox" v-if=" orderData.items.length!=0">
+			<view class="detailedTitle">项目</view>
+			<view class="detailedLineBox">
+				<view class="detailedLine" v-for="(item,index) in orderData.items">
+
+					<view class="detailedCont">
+						<view class="detailedName">{{item.ItemName}}项目名称</view>
+						<span>x1</span>
+					</view>
+				</view>
+			</view>
+		</view>
+
+
+		<!-- 商品明细-->
+		<view class="detailedBox itemBox" v-if="orderData.goods.length!=0">
+			<view class="detailedTitle">商品</view>
+			<view class="detailedLineBox">
+				<view class="detailedLine" v-for="(item,index) in orderData.goods">
+
+					<view class="detailedCont">
+						<view class="detailedName">{{item.GoodsName}}商品名称</view>
+						<span>x{{item.SaleQty}}</span>
+
+					</view>
+				</view>
+			</view>
+		</view>
+
+
+
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				location: '',
+				isload: false,
+				id: '',
+				orderData: '',
+				type: '',
+
+				ifShow: false,
+
+				timeShow: false,
+				orderTime: '',
+				OrderTimes: '',
+				orderTimeIndex1: 0,
+				orderTimeIndex2: -1,
+				isShowMa: true,
+				noClick: true,
+			}
+		},
+		onLoad(opt) {
+			this.location = uni.getStorageSync("locationCity");
+			this.id = opt.id
+			this.getData()
+			this.type = opt.type;
+
+		},
+		onShow() {
+			if (this.id) {
+				this.getData()
+			}
+		},
+		methods: {
+			refundDetail() {
+				uni.navigateTo({
+					url: '../refundMoney/refundMoneyDetail?id=' + this.orderData.AfterServiceID
+
+				})
+			},
+			changeDetail() {
+				uni.navigateTo({
+					url: '../changeStore/changeStoreDetail?id=' + this.orderData.ChangeShopID
+				})
+			},
+			changeStore() {
+				// 是否可以更换门店
+				this.haveChangeStore();
+			},
+			haveChangeStore() {
+				uni.showLoading({
+					title: '加载中'
+				});
+
+				this.$http('worldKeepCar/orderChangeShop/queryIfConChangeShop', {
+					sheetId: this.id,
+
+				}, 'GET').then(res => {
+					uni.hideLoading();
+					if (res.code == 1) {
+
+						uni.showModal({
+							title: '提示',
+							showCancel: false,
+							content: res.msg,
+							success: function(res) {
+
+
+							}
+						});
+					} else if (res.code == 0) {
+						uni.navigateTo({
+							url: '../changeStore/changeStore?sheetId=' + this.id + '&oldShopID=' + this
+								.orderData.ShopID + '&oldStoreName=' + this
+								.orderData.ShopName + '&oldStoreAddress=' + this.orderData.ProvinceName +
+								this.orderData.CityName + this.orderData.AreaName + this.orderData
+								.Address + '&brand=' + this.orderData.Brand
+						})
+					}
+
+				})
+			},
+			showMa() {
+				this.isShowMa = !this.isShowMa
+			},
+			gopingjia() {
+				uni.navigateTo({
+					url: '../me/myAppraiseDetail?id=' + this.id
+				})
+			},
+			timeShowClick() {
+				if (this.OrderTimes) {
+					this.timeShow = true
+				} else {
+					uni.showToast({
+						title: '当前店铺尚未设置可预约时间',
+						icon: 'none',
+						duration: 3000
+					});
+				}
+
+			},
+
+			map() {
+				console.log("打开地图")
+				var that = this;
+				if (!that.orderData.Lat || !that.orderData.Lng) {
+					uni.showToast({
+						title: '该店铺未设置定位',
+						icon: 'none',
+						duration: 3000
+					});
+				} else {
+					uni.openLocation({
+						latitude: Number(that.orderData.Lat),
+						longitude: Number(that.orderData.Lng),
+						name: that.orderData.ShopName,
+						address: that.orderData.Address,
+						success: function() {
+							console.log('success');
+						},
+						fail(err) {
+							console.log(err)
+						}
+					});
+				}
+
+			},
+
+			call() {
+				uni.makePhoneCall({
+					phoneNumber: this.orderData.MobilePhone
+				});
+			},
+
+
+			getData() {
+				uni.showLoading({
+					title: '加载中'
+				});
+
+				this.$http('worldKeepCar/keepCarMy/queryMiNiAppTSheetDetail', {
+					lat: this.location.lat,
+					lng: this.location.lng,
+					id: this.id,
+				}, 'GET').then(res => {
+					uni.hideLoading();
+					this.orderData = res.data;
+
+					this.getOrderTimes();
+				})
+			},
+			goback() {
+
+				uni.navigateBack({})
+
+
+			},
+			evaluate() {
+				uni.navigateTo({
+					url: 'evaluate?sheetID=' + this.id + '&shopID=' + this.orderData.ShopID
+				})
+			},
+
+			cancelOrder() {
+				var that = this;
+				uni.showModal({
+					title: '提示',
+					content: '确定要取消订单吗',
+					success: function(res) {
+						if (res.confirm) {
+							uni.showLoading({
+								title: '取消中'
+							})
+							that.$http('worldKeepCar/keepCarMy/cancelMiNiTMSheet', {
+								id: that.orderData.ID
+							}, 'POST').then(res => {
+								uni.hideLoading();
+
+
+								uni.showModal({
+									title: '提示',
+									content: '订单取消成功',
+									showCancel: false,
+									success: function(res) {
+										that.getData()
+									}
+								});
+							})
+						} else if (res.cancel) {
+
+						}
+					}
+				});
+			},
+			refundMoney() {
+				console.log('退款');
+
+
+				// 是否可以退款
+				this.haveRefundMoney();
+			},
+			haveRefundMoney() {
+				uni.showLoading({
+					title: '加载中'
+				});
+
+				this.$http('worldKeepCar/orderRefund/queryIfConRefund', {
+					sheetId: this.id,
+
+				}, 'GET').then(res => {
+					uni.hideLoading();
+					if (res.code == 1) {
+
+						uni.showModal({
+							title: '提示',
+							showCancel: false,
+							content: res.msg,
+							success: function(res) {
+
+
+							}
+						});
+					} else if (res.code == 0) {
+
+						uni.navigateTo({
+							url: '../refundMoney/refundMoney?sheetId=' + this.id + '&maxMoney=' + this
+								.orderData.PayMoney
+
+						})
+					}
+
+				})
+			},
+			orderPay() {
+				uni.showLoading({
+					title: '支付中'
+				})
+				var that = this;
+				this.$http('worldKeepCar/maintainOrder/orderPay', {
+					sheetID: this.orderData.ID
+				}, 'POST').then(res => {
+					uni.hideLoading();
+					if (res.isPay == 0) {
+						uni.showToast({
+							title: '支付成功',
+							icon: 'none',
+							duration: 2000
+						});
+						that.getData()
+					} else {
+						var payInfo = JSON.parse(res.data.payInfo)
+						uni.requestPayment({
+							provider: 'wxpay',
+							// timeStamp: String(Date.now()),
+							timeStamp: payInfo.timeStamp,
+							nonceStr: payInfo.nonceStr,
+							package: payInfo.package,
+							signType: payInfo.signType,
+							paySign: payInfo.paySign,
+							success: function(res) {
+								console.log('success:' + JSON.stringify(res));
+								uni.showToast({
+									title: '支付成功',
+									icon: 'none',
+									duration: 2000
+								});
+								that.getData()
+							},
+							fail: function(err) {
+								console.log('fail:' + JSON.stringify(err));
+
+							}
+						});
+					}
+				})
+			},
+			timeSfCk(item, index) {
+				if (item.type == 1) {
+					this.orderTimeIndex2 = index;
+					var orderTime = this.OrderTimes[this.orderTimeIndex1].date + ' ' + item.time
+					this.orderTime = orderTime
+				}
+
+			},
+			timeCk() {
+				this.timeShow = false;
+				var urlStr = ''
+				if (this.orderData.OrderState == 1) {
+					urlStr = 'worldKeepCar/keepCarMy/saveOrderTime'
+				}
+				if (this.orderData.OrderState == 2) {
+					urlStr = 'worldKeepCar/keepCarMy/changeTSheetTime'
+				}
+				this.$http(urlStr, {
+					id: this.id,
+					orderTime: this.orderTime
+				}, 'POST').then(res => {
+					if (res.code == 0) {
+						uni.showToast({
+							title: '预约成功',
+							icon: 'none',
+							duration: 2000
+						});
+					}
+					this.getData()
+				})
+			},
+			getOrderTimes() {
+				this.$http('worldKeepCar/keepCarMy/getTSheetTimes', {
+					shopId: this.orderData.ShopID,
+					id: this.orderData.ID,
+				}, 'GET').then(res => {
+
+					this.OrderTimes = res.data;
+				})
+			}
+		},
+		onPullDownRefresh() {
+			this.getOrderTimes()
+			this.getData()
+			setTimeout(function() {
+				uni.stopPullDownRefresh();
+			}, 1000);
+		},
+
+	}
+</script>
+
+<style scoped>
+	.box {
+		min-height: 100vh;
+		background: #F4F5F7;
+
+	}
+
+	.top {
+		height: 190rpx;
+		background-color: #F03B3B;
+
+	}
+
+	.orderState {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		padding-top: 40rpx;
+	}
+
+	.SheetState {
+		display: flex;
+		justify-content: center;
+		font-size: 36rpx;
+		font-weight: 500;
+		color: #FFFFFF;
+		margin-left: 15rpx;
+
+	}
+
+
+
+	.timeEditImg {
+		width: 25rpx;
+		height: 25rpx;
+		padding-left: 20rpx;
+	}
+
+
+
+	.shopBoximg {
+		width: 40rpx;
+		height: 40rpx;
+	}
+
+	.shopRightImg {
+		width: 44rpx;
+		height: 45rpx;
+	}
+
+	.shopsx {
+		width: 1px;
+		height: 50rpx;
+		background: #EEEEEE;
+		margin-top: 30rpx;
+		margin-left: 28rpx;
+	}
+
+	.shopBox {
+
+		display: flex;
+		padding: 30rpx 20rpx;
+		margin: 0rpx 24rpx;
+		margin-top: -60rpx;
+		background-color: #FFFFFF;
+		border-radius: 10rpx;
+
+	}
+
+	.shopCont {
+		width: 405rpx;
+		padding-left: 20rpx;
+
+	}
+
+	.shopName {
+		font-size: 30rpx;
+		font-weight: bold;
+		color: #3C3C3C;
+	}
+
+	.Address {
+		color: #999999;
+		font-size: 24rpx;
+		padding-top: 10rpx;
+	}
+
+	.shopRihgtTxt {
+		color: #999999;
+		font-size: 24rpx;
+
+	}
+
+	.shopRightBox {
+		padding-top: 30rpx;
+		padding-left: 28rpx;
+	}
+
+	.peopleCont {
+		font-size: 28rpx;
+		color: #3C3C3C;
+		padding-left: 20rpx;
+	}
+
+	.people {
+		display: flex;
+		padding-left: 20rpx;
+		padding-top: 30rpx;
+		padding-bottom: 36rpx;
+	}
+
+	.PlateNumberBox {
+		display: flex;
+		padding-left: 20rpx;
+		padding-bottom: 30rpx;
+	}
+
+	.PlateNumbercx {
+		font-size: 28rpx;
+
+		color: #3C3C3C;
+		padding-left: 20rpx;
+	}
+
+	.PlateNumber {
+		width: 130rpx;
+		height: 32rpx;
+		border-radius: 4rpx;
+		border: 1px solid #F19D01;
+		line-height: 32rpx;
+		text-align: center;
+		font-size: 22rpx;
+		color: #F19D01;
+		margin-left: 26rpx;
+	}
+
+	.PlateNumberBoxTop {
+		display: flex;
+	}
+
+	.CarModel {
+		font-size: 26rpx;
+		color: #999999;
+		padding-left: 20rpx;
+		padding-top: 6rpx;
+		padding-right: 20rpx;
+		padding-bottom: 15rpx;
+		width: 600rpx;
+	}
+
+	.detailedBox {
+
+		background: #FFFFFF;
+		border-radius: 10px;
+		margin: 20rpx 24rpx;
+		padding-bottom: 20rpx;
+	}
+
+	.itemBox {
+		margin-top: 20rpx;
+	}
+
+	.carMes {
+		padding: 23rpx 20rpx;
+		display: flex;
+		align-items: center;
+		justify-content: flex-start;
+		border-bottom: 1rpx solid #EEEEEE;
+	}
+
+	.plate {
+		font-size: 30rpx;
+		color: #3C3C3C;
+		font-weight: bold;
+		margin-right: 20rpx;
+	}
+
+	.mileage {
+		font-size: 24rpx;
+		color: #F19D01;
+		padding: 0rpx 10rpx;
+		border: 1rpx solid #F19D01;
+		border-radius: 4rpx;
+		height: 36rpx;
+	}
+
+	.detailedTitle {
+		padding: 23rpx 20rpx;
+		display: flex;
+		text-align: center;
+		align-content: flex-start;
+		border-bottom: 1rpx solid #EEEEEE;
+
+		font-size: 30rpx;
+		font-weight: bold;
+		color: #3C3C3C;
+	}
+
+
+	.detailedLine {
+		display: flex;
+		padding-left: 20rpx;
+		padding-top: 40rpx;
+	}
+
+	.detailedImg {
+		width: 120rpx;
+		height: 120rpx;
+		border-radius: 10rpx;
+	}
+
+	.detailedCont {
+		padding-left: 20rpx;
+		display: flex;
+		justify-content: space-between;
+	}
+
+	.detailedName {
+		font-size: 26rpx;
+		color: #3C3C3C;
+	}
+
+
+
+	.goodscost {
+		width: 702rpx;
+		background: #FFFFFF;
+		border-radius: 10px;
+		margin-left: 24rpx;
+		margin-top: 20rpx;
+		padding: 15rpx 0;
+	}
+
+	.goodscostLine {
+		display: flex;
+		justify-content: space-between;
+		font-size: 28rpx;
+		padding: 20rpx 20rpx;
+		color: #666666;
+	}
+
+	.goodsCostNum {
+		color: #3C3C3C;
+	}
+
+	.information {
+		width: 702rpx;
+		background: #FFFFFF;
+		border-radius: 10px;
+		margin-left: 24rpx;
+		margin-top: 20rpx;
+		padding: 0rpx 0 15rpx 0;
+	}
+
+	.informationLine {
+		display: flex;
+		font-size: 26rpx;
+		padding: 15rpx 20rpx;
+	}
+
+	.informationTxt {
+		width: 190rpx;
+		color: #999999;
+	}
+
+	.informationNum {
+		color: #333333;
+	}
+
+	.copyBtn {
+		width: 86rpx;
+		height: 40rpx;
+		background: #F4F5F7;
+		border-radius: 20rpx;
+		font-size: 24rpx;
+		color: #333333;
+		text-align: center;
+		line-height: 40rpx;
+		margin-left: 20rpx;
+	}
+
+	.orderBottom {
+		width: 750rpx;
+		height: 98rpx;
+		background: #FFFFFF;
+		position: fixed;
+		left: 0;
+		bottom: 0;
+		display: flex;
+		justify-content: flex-end;
+	}
+
+	.cancelBtn {
+		width: 150rpx;
+		height: 56rpx;
+		border-radius: 36rpx;
+		border: 2rpx solid #DDDDDD;
+		text-align: center;
+		line-height: 56rpx;
+		font-size: 28rpx;
+		color: #3C3C3C;
+		margin-top: 21rpx;
+		margin-right: 16rpx;
+		margin-left: 20rpx;
+	}
+
+	.payBtn {
+		width: 150rpx;
+		height: 56rpx;
+		border-radius: 36rpx;
+		border: 2rpx solid #FF4F00;
+		text-align: center;
+		line-height: 56rpx;
+		font-size: 28rpx;
+		color: #FF4F00;
+		margin-top: 21rpx;
+		margin-right: 16rpx;
+		margin-left: 20rpx;
+	}
+
+	.timeBox2 {
+		width: 100vw;
+		height: 100vh;
+		background: rgba(0, 0, 0, 0.5);
+		position: fixed;
+		top: 0;
+		left: 0;
+	}
+
+	.timeLeftActive {
+		background: #FFFFFF;
+	}
+
+	.timeMain {
+		width: 100vw;
+		height: 70vh;
+		margin-top: 30vh;
+		background: #FFFFFF;
+		border-radius: 24rpx 24rpx 0px 0px;
+	}
+
+	.timesfNo {
+		background: #F5F5F5;
+	}
+
+	.timesfActive {
+		background: #FF4F00;
+
+	}
+
+	.timesfActive .timeSfNum {
+		color: #FFFFFF;
+	}
+
+	.timesfActive .timeyy {
+		color: #FFFFFF;
+	}
+
+	.topBox {
+		padding: 20rpx 24rpx;
+	}
+
+	.timeTop {
+		display: flex;
+		line-height: 90rpx;
+		padding-left: 24rpx;
+		padding-right: 24rpx;
+		justify-content: space-between;
+	}
+
+	.timeTopTitle {
+		font-size: 30rpx;
+		font-family: PingFangSC-Medium, PingFang SC;
+		font-weight: 600;
+		color: #3C3C3C;
+	}
+
+	.close {
+		color: #999999;
+		font-size: 30rpx;
+		padding-left: 30rpx;
+	}
+
+	.timeCont {
+		height: calc(70vh - 210rpx);
+	}
+
+	.timeSv {
+		height: calc(70vh - 210rpx);
+	}
+
+	.timeLeft2 {
+		width: 162rpx;
+		background: #F4F5F7;
+		border-top: 1px soid #F4F5F7;
+		border-right: 1px soid #F4F5F7;
+	}
+
+	.timeRight2 {
+		width: 588rpx;
+	}
+
+	.timesf {
+		width: 165rpx;
+		height: 98rpx;
+		border-radius: 7rpx;
+		border: 2rpx solid #EEEEEE;
+		text-align: center;
+		margin-left: 20rpx;
+		margin-bottom: 24rpx;
+	}
+
+	.timeBottom {
+		width: 750rpx;
+		height: 120rpx;
+		background: #FFFFFF;
+		box-shadow: 0px -2px 20rpx 0px rgba(153, 153, 153, 0.2);
+		display: flex;
+		align-items: center;
+
+	}
+
+	.timerightBox {
+		display: flex;
+		flex-wrap: wrap;
+	}
+
+	.timeCont {
+		display: flex;
+	}
+
+	.timeSfNum {
+		color: #666666;
+		font-size: 28rpx;
+		padding-top: 15rpx;
+	}
+
+	.timeyy {
+		font-size: 24rpx;
+		color: #999999;
+	}
+
+	.timecomplete {
+		width: 690rpx;
+		height: 74rpx;
+		background: linear-gradient(124deg, #FF8700 0%, #FF4F00 100%);
+		border-radius: 37rpx;
+		line-height: 74rpx;
+		text-align: center;
+		font-size: 30rpx;
+		color: #FFFFFF;
+		margin-left: 30rpx;
+	}
+
+	.timeleftLine {
+		font-size: 30rpx;
+		color: #999999;
+		text-align: center;
+		padding: 28rpx 10rpx;
+		border-bottom: 1px solid #EEEEEE;
+	}
+
+	.yuyueBox {
+
+		background: #FFFFFF;
+		border-radius: 10rpx;
+		margin-left: 24rpx;
+		margin-right: 24rpx;
+
+	}
+
+	.yuyueTime {
+		display: flex;
+		padding-left: 20rpx;
+		padding-top: 30rpx;
+		padding-bottom: 36rpx;
+		align-items: center;
+	}
+
+	.yuyueState {
+		display: flex;
+		padding-left: 20rpx;
+		padding-top: 30rpx;
+		padding-bottom: 36rpx;
+	}
+
+	.maBox {
+		display: flex;
+		justify-content: space-between;
+		padding: 24rpx 20rpx;
+	}
+
+	.querenMa {
+
+		margin: 20rpx 0;
+		padding-bottom: 30rpx;
+	}
+
+	.maBoximg {
+		width: 308rpx;
+		height: 308rpx;
+		margin: 30rpx 197rpx;
+
+
+	}
+
+	.rightShou {
+		display: flex;
+		justify-content: flex-start;
+		align-items: center;
+	}
+</style>

pages/user/historySpend.vue

@@ -0,0 +1,161 @@
+<template>
+	<view class="box">
+		<view class="itemHistory" v-for="(item,index) in itemData" :key="index" @click="goDetail(item.ID)">
+			<view class="time">2021-09-03</view>
+			<view class="carPlate">
+				<view class="plate">鲁A12345</view>
+				<view class="mileage">1000km</view>
+			</view>
+
+			<view class="shopName">门店名称门店名称门店名称门店名称门店名称门店名称门店名称</view>
+			<view class="itemContent">商品 项目商品 项目商品 项目商品 项目商品 项目商品 项目商品 项目</view>
+		</view>
+
+		<!-- 上拉 加载更多 -->
+		<view class="noMore" v-if="noMoreShow">没有更多数据</view>
+		<!-- 无数据空白页 -->
+		<nodata v-if="itemData.length==0"></nodata>
+
+	</view>
+</template>
+
+<script>
+	import nodata from '../../components/nodata/nodata.vue'
+	export default {
+		components: {
+			nodata,
+		},
+
+		data() {
+			return {
+				page: 1,
+				itemData: [1, 2, 3],
+				noMoreShow: false,
+			}
+		},
+		onLoad() {
+			this.page = 1
+			// this.myOrderCoupon()
+		},
+		methods: {
+			goDetail(id) {
+				uni.navigateTo({
+					url: 'historyDetail?id=' + id
+				})
+			},
+			myOrderCoupon() {
+				uni.showLoading({
+					title: '加载中'
+				})
+				this.$http('worldKeepCar/keepCarMy/listTCouponPage', {
+
+					page: this.page,
+					limit: 10,
+				}, 'GET').then(res => {
+					uni.hideLoading();
+					var list = res.data.Items
+
+					// 处理 undefined和null转为空白字符串
+					list.forEach((item, index) => {
+						for (const key in item) {
+							item[key] = this.$praseStrEmpty(item[key])
+						}
+					})
+
+					if (this.page == 1) {
+						this.itemData = list
+					} else {
+						this.itemData = this.itemData.concat(list)
+					}
+
+					if (list.length < 10) {
+						this.noMoreShow = true
+					} else {
+						this.noMoreShow = false
+					}
+
+					if (this.itemData.length != 0) {
+						this.itemData.forEach((item, index) => {
+							if (item.pickNum <= 0) {
+								this.allHave = false
+							}
+						})
+					}
+
+
+
+				})
+			},
+
+
+		},
+
+		// 下拉刷新 上拉加载更多
+		onPullDownRefresh() {
+			this.page = 1
+			this.myOrderCoupon()
+			setTimeout(function() {
+				uni.stopPullDownRefresh();
+			}, 1000);
+		},
+		onReachBottom() {
+			this.page++;
+			this.myOrderCoupon()
+		},
+	}
+</script>
+
+<style>
+	.box {
+		min-height: 100vh;
+		background-color: #F4F5F7;
+		padding-top: 20rpx;
+	}
+
+	.itemHistory {
+		margin: 0rpx 24rpx 20rpx;
+		padding: 20rpx;
+		background-color: #FFFFFF;
+		border-radius: 10rpx;
+
+	}
+
+	.time {
+		font-size: 24rpx;
+		color: #999999;
+	}
+
+	.carPlate {
+		margin: 20rpx 0rpx 15rpx;
+		display: flex;
+		align-items: center;
+		justify-content: flex-start;
+	}
+
+	.plate {
+		font-size: 30rpx;
+		color: #3C3C3C;
+		font-weight: bold;
+		margin-right: 20rpx;
+	}
+
+	.mileage {
+		font-size: 24rpx;
+		color: #F19D01;
+		padding: 0rpx 10rpx;
+		border: 1rpx solid #F19D01;
+		border-radius: 4rpx;
+		height: 36rpx;
+	}
+
+	.shopName,
+	.itemContent {
+		color: #666666;
+		font-size: 24rpx;
+		margin: 15rpx 0rpx;
+		/* 隐藏文字显示 ...不换行 */
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+</style>