退款申请

common/apiurl.js

@@ -1,72 +1,76 @@
 const apiurl = {
 	//反馈
-	feedbackAddUrl:'/articleFeedback/add',
+	feedbackAddUrl:'/client/articleFeedback/add',
 	// 获取微信用户信息
-	getuseinfourl:'/wechat/h5/user',
+	getuseinfourl:'/client/wechat/h5/user',
 	// 公众号支付
-	payurl:'/app/pay',
+	payurl:'/client/app/pay',
 	// 创建订单
-	createOrderurl:'/order/createOrder',
+	createOrderurl:'/client/order/createOrder',
 	// 退款
-	refundurl:'/app/order/refund',
+	refundurl:'/client/app/order/refund',
 	// 绑定手机号
-	bindphoneurl:'/app/order/refund2',
+	bindphoneurl:'/client/app/order/refund2',
 	// 手机登录验证码
-	phoneLoginCodeUrl:'/auth/sendSmsCode',
+	phoneLoginCodeUrl:'/client/auth/sendSmsCode',
 	// 手机登录验证码验证
-	phoneLoginAuthUrl:'/auth/verifyCode',
+	phoneLoginAuthUrl:'/client/auth/verifyCode',
 	// code换取微信信息
-	getWXInfoUrl:'/wechat/h5/code/',
+	getWXInfoUrl:'/client/wechat/h5/code/',
 	// 微信支付 在pay.js中使用
-	wxPayUrl:'/wechat/pay',
+	wxPayUrl:'/client/wechat/pay',
 	// 客户端首页
-	getIndexDataUrl:'/index',
+	getIndexDataUrl:'/client/index',
 	//获取路段信息
-	roadInfoById:'/roadinfo/selectById/',
+	roadInfoById:'/client/roadinfo/selectById/',
 	
 	// 用户车辆
-	mycarsUrl:'/membervehicle',
+	mycarsUrl:'/client/membervehicle',
 	// 设置为默认车辆
-	setDefaultCarUrl:'/membervehicle/modifyDefault/',
+	setDefaultCarUrl:'/client/membervehicle/modifyDefault/',
 	
 	// 获取订单列表
-	getOrderListUrl:'/orderinfo',
+	getOrderListUrl:'/client/orderinfo',
 	// 获取支付订单详情
-	getOrderinfoUrl:'/orderinfo/paydetail/',
+	getOrderinfoUrl:'/client/orderinfo/paydetail/',
 	// 获取订单详情
-	getOrderDetailUrl:'/orderinfo/detail/',
+	getOrderDetailUrl:'/client/orderinfo/detail/',
 	//获取信息列表
-	getMessageListUrl:'/membernews',
+	getMessageListUrl:'/client/membernews',
 	//消息已读接口
-	messageReadUrl:'/membernews/read/',
+	messageReadUrl:'/client/membernews/read/',
 	// 获取附近的路段
-	nearRoadslUrl:'/roadinfo/nearRoads',
+	nearRoadslUrl:'/client/roadinfo/nearRoads',
 	// 获取路段收费规则
-	roadsChargeRuleUrl:'/roadinfo/feeRule/',
+	roadsChargeRuleUrl:'/client/roadinfo/feeRule/',
 	//包月信息
-	monthInfoUrl:'/memberinfo/monthInfo/',
+	monthInfoUrl:'/client/memberinfo/monthInfo/',
 	//创建包月
-	createMonthUrl:'/memberinfo/createMonth',
+	createMonthUrl:'/client/memberinfo/createMonth',
 	//包月支付
-	monthPayUrl:'/monthpay/gzbank/quick',
+	monthPayUrl:'/client/monthpay/gzbank/quick',
 	//包月支付查询
-	getMonthPayUrl:'/monthpay/query/',
+	getMonthPayUrl:'/client/monthpay/query/',
 	//包月列表
-	getMonthListUrl:'/memberinfo/monthList',
+	getMonthListUrl:'/client/memberinfo/monthList',
 	//取消包月订单
-	cancelMonthUrl:'/memberinfo/cancelMonth/',
+	cancelMonthUrl:'/client/memberinfo/cancelMonth/',
 	
 	//启动无感支付
-	feePayUrl: '/membervehicle/enable/feepay/',
+	feePayUrl: '/client/membervehicle/enable/feepay/',
 	//贵州银行快捷支付
-	payGzbankUrl: '/pay/gzbank/quick',
+	payGzbankUrl: '/client/pay/gzbank/quick',
 	
 	// 贵州银行支付
 	gzbankurl:'http://wx.hw.hongweisoft.com/pay/client/gzbank/paygate',
 	// 订单查询
-	getOrderInfoApi:'/pay/query/',
+	getOrderInfoApi:'/client/pay/query/',
 	// 查询设备状态
-	getEqupmentStatusApi: '/hardware/deviceInfo/'
+	getEqupmentStatusApi: '/client/hardware/deviceInfo/',
+	// 订单退款
+	updateOrderRefundApi: '/client/orderinfo/refundApply',
+	// 获取退款详情
+	getOrderRefundDetailsApi: '/client/orderinfo/refund/detail/'
 }
 
 export {

common/config.js

@@ -2,8 +2,8 @@ const config = {
 	wxAppid:'wxbe90cc7c5233dd84',// 测试wxAppid 
 	// wxAppid: 'wx45c3cf2b632f5fd5', // 正式wxAppid
 	
-	baseUrl:'https://wx.hw.hongweisoft.com/parking/client',// 64服务器
-	// baseUrl:'https://parking.pdzhtc.com/client', //正式接口访问地址
+	baseUrl:'https://wx.hw.hongweisoft.com/parking',// 64服务器
+	// baseUrl:'https://parking.pdzhtc.com', //正式接口访问地址
 }
 export {
 	config

common/http.api.js

@@ -3,7 +3,6 @@ import {apiurl} from "./apiurl.js"
 // 此处第二个参数vm，就是我们在页面使用的this，你可以通过vm获取vuex等操作，更多内容详见uView对拦截器的介绍部分：
 // https://uviewui.com/js/http.html#%E4%BD%95%E8%B0%93%E8%AF%B7%E6%B1%82%E6%8B%A6%E6%88%AA%EF%BC%9F
 const install = (Vue, vm) => {
-
 	// 反馈提交
 	let feedbackAdd = (params = {}) => vm.$u.post(apiurl.feedbackAddUrl, params);
 	
@@ -56,6 +55,10 @@ const install = (Vue, vm) => {
 	let getOrderInfo = (params = {}) => vm.$u.get(apiurl.getOrderInfoApi + params.orderId);
 	// 设备状态查询
 	let getEquomentInfo = (params = {}) => vm.$u.get(apiurl.getEqupmentStatusApi + params.orderNo);
+	// 订单退款操作
+	let updateOrderRefund = (params = {}) => vm.$u.post(apiurl.updateOrderRefundApi, params);
+	// 获取订单退款详情
+	let getOrderRefundDetails = (params = {}) => vm.$u.get(apiurl.getOrderRefundDetailsApi + params.orderId)
 	// 将各个定义的接口名称，统一放进对象挂载到vm.$u.api(因为vm就是this，也即this.$u.api)下
 	vm.$u.api = {
 		feedbackAdd,
@@ -89,7 +92,9 @@ const install = (Vue, vm) => {
 		messageRead,
 		feePay,
 		getOrderInfo,
-		getEquomentInfo
+		getEquomentInfo,
+		updateOrderRefund,
+		getOrderRefundDetails
 	};
 }
 

pages.json

@@ -214,6 +214,35 @@
             }
             
         }
+        ,{
+            "path" : "pages/applyRefund/applyRefund",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "申请退款",
+                "enablePullDownRefresh": false,
+                "navigationBarBackgroundColor": "#008CFF",
+                "navigationBarTextStyle": "white"
+            }
+            
+        }
+        ,{
+            "path" : "pages/applyRefundDetails/applyRefundDetails",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "申请退款",
+                "enablePullDownRefresh": false,
+                "navigationBarBackgroundColor": "#008CFF",
+                "navigationBarTextStyle": "white"
+            }
+            
+        },{
+            "path" : "pages/applyRefundDetails/applyRefundAchieveDetails",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "订单详情"
+            }
+            
+        }
     ],
 	"globalStyle": {
 		"navigationBarTextStyle": "black",

pages/applyRefund/applyRefund.scss

@@ -0,0 +1,74 @@
+.apply-refund {
+	background-color: #F6F6FF;
+	// height: calc(100vh - 44px);
+	.apply-refund-form {
+		background-color: #fff;
+		font-size: 28rpx;
+		.apply-refund-form-item {
+			display: flex;
+			flex-wrap: wrap;
+			// height: 100rpx;
+			line-height: 100rpx;
+			padding: 0 17px;
+			border-bottom: solid 2px #f5f5f5;
+			.apply-refund-form-label {
+				width: 150rpx;
+			}
+			.apply-refund-form-content {
+				color: #787878;
+				background-color: #fff;
+				.money {
+					color: #FA6400;
+				}
+				textarea {
+					width: 100%;
+					background-color: #f5f5f5;
+					font-size: 26rpx;
+					&:after{
+						content: attr(data-maxnum);
+						position: absolute;
+						right: 10px;
+						bottom: 3px;
+						font-size: 12px;
+					}
+				}
+			}
+			.full-width {
+				width: 100%;
+				background-color: #f5f5f5;
+				padding: 30rpx;
+				margin-bottom: 30rpx;
+				border-radius: 5px;
+				/deep/ .u-add-wrap {
+					border: 1px dashed #606266;
+				}
+			}
+		}
+	}
+	.apply-refund-form-submit {
+		padding: 0 50rpx;
+		margin-top: 50rpx;
+	}
+	.pop-warp {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		height: 100%;
+		.pop-warp-icon {
+			width: 100rpx;
+			height: 100rpx;
+			line-height: 120rpx;
+			margin: 0 auto;
+			border-radius: 50%;
+			background-color: $u-type-primary;
+			text-align: center;
+		}
+		.pop-warp-tips {
+			color: $u-type-primary;
+			width: 260rpx;
+			text-align: center;
+			margin-top: 30rpx;
+		}
+	}
+}

pages/applyRefund/applyRefund.vue

@@ -0,0 +1,124 @@
+<template>
+	<view class="apply-refund">
+		<view class="apply-refund-form">
+			<view class="apply-refund-form-item">
+				<view class="apply-refund-form-label">
+					退款金额：
+				</view>
+				<view class="apply-refund-form-content">
+					<text class="money">{{Number(refundForm.refundAmount).toFixed(2)}}</text>元
+				</view>
+			</view>
+			<view class="apply-refund-form-item">
+				<view class="apply-refund-form-label">
+					退款原因：
+				</view>
+				<view class="apply-refund-form-content full-width">
+					<textarea
+						v-model="refundForm.refundReason"
+						maxlength="200"
+						placeholder="请填写申请退款原因"
+						:data-maxnum="refundForm.refundReason.length+'/200'"/>
+					<u-upload
+						:header="{
+							Authorization: 'Bearer ' + vuex_token
+						}"
+						ref="uUpload"
+						:action="action"></u-upload>
+				</view>
+			</view>
+		</view>
+		<view class="apply-refund-form-submit">
+			<u-button type="primary" @click="submit">提交</u-button>
+		</view>
+		<u-mask :show="successPop" :zoom="true" :custom-style="{background: 'rgba(255, 255, 255, 0.8)'}">
+			<view class="pop-warp">
+				<view class="pop-warp-icon">
+					<u-icon name="checkbox-mark" color="#fff" size="50"></u-icon>
+				</view>
+				<view class="pop-warp-tips">
+					<text>提交成功！预计3-7个工作日内处理</text>
+				</view>
+			</view>
+		</u-mask>
+		<u-toast ref="uToast" />
+	</view>
+</template>
+
+<script>
+	import {mapState, mapMutations} from 'vuex';
+	import { config } from '@/common/config.js'
+	export default {
+		data() {
+			return {
+				refundForm: {
+					orderId: '',
+					refundAmount: '',
+					refundReason: '',
+					images: []
+				},
+				action: config.baseUrl + '/file/tencent/upload',
+				successPop: false
+			}
+		},
+		computed: {  
+			...mapState(['vuex_token'])  
+		},
+		onLoad(page) {
+			this.refundForm.orderId = page.orderId
+			this.refundForm.refundAmount = Number(page.payAmount)
+		},
+		methods: {
+			submit() {
+				let files = [];
+				this.$refs.uUpload.lists.forEach(item => {
+					const url = item?.response?.data?.url
+					if (url) {
+						files.push(url)
+					}
+				})
+				this.refundForm.images = files
+				if (this.refundForm.refundReason && files.length > 0) {
+					this.$u.api.updateOrderRefund(this.refundForm)
+						.then(res => {
+							console.log(res)
+							this.successPop = true
+							if (res.code === 200) {
+								setTimeout(() => {
+									this.$u.route('pages/applyRefundDetails/applyRefundDetails', {
+										orderId: this.refundForm.orderId
+									})
+								}, 2000)
+							} else {
+								this.successPop = false
+								this.$refs.uToast.show({
+									title: res.msg,
+									type: 'error'
+								})
+							}
+						})
+						.catch(err => {
+							this.$refs.uToast.show({
+								title: '操作失败!',
+								type: 'error'
+							})
+						})
+				} else if (this.refundForm.refundReason == '') {
+					this.$refs.uToast.show({
+						title: '请填写申请退款原因',
+						type: 'warning'
+					})
+				} else if (files.length === 0) {
+					this.$refs.uToast.show({
+						title: '请至少选择一张图片',
+						type: 'warning'
+					})
+				}
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+@import './applyRefund.scss';
+</style>

pages/applyRefundDetails/applyRefundAchieveDetails.vue

@@ -0,0 +1,64 @@
+<template>
+	<!-- 订单详情  状态支付退款成功 -->
+	<view class="order-details">
+		<view class="order-details-content">
+			<view class="order-details-content-header">
+				<image src="../../static/img/refund-success.png"></image>
+				<view>+{{details.refundAmount}}</view>
+			</view>
+			<view class="order-details-content-item">
+				<view>当前状态</view>
+				<view>已全额退款</view>
+			</view>
+			<view class="order-details-content-item">
+				<view>退款时间</view>
+				<view>{{details.applyTime}}</view>
+			</view>
+			<view class="order-details-content-item">
+				<view>退款方式</view>
+				<view>退回原支付账户</view>
+			</view>
+			<view class="order-details-content-item">
+				<view>退款单号</view>
+				<view>{{details.refundNo}}</view>
+			</view>
+		</view>
+		<u-toast ref="uToast" />
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				details: {}
+			}
+		},
+		onLoad(page) {
+			this.getOrderRefundDetails(page.orderId)
+		},
+		methods: {
+			getOrderRefundDetails(orderId) {
+				this.$u.api.getOrderRefundDetails({
+					orderId: orderId
+				})
+					.then(res => {
+						console.log(res)
+						if (res.code === 200) {
+							this.details = res.data
+						}
+					})
+					.catch(err => {
+						this.$refs.uToast.show({
+							title: '操作失败',
+							type: 'error'
+						})
+					})
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+@import './applyRefundDetails.scss';
+</style>

pages/applyRefundDetails/applyRefundDetails.scss

@@ -0,0 +1,83 @@
+.refund-details {
+	background-color: #f5f5f5;
+	padding-bottom: 100rpx;
+	min-height: calc(100vh - 44px);
+	.refund-details-list {
+		background-color: #fff;
+		.refund-details-list-item {
+			display: flex;
+			padding: 0 17px;
+			line-height: 70rpx;
+			.rdli-label {
+				width: 150rpx;
+				text-align: right;
+			}
+			.rdli-content {
+				width: calc(100% - 150rpx);
+			}
+			.rdli-font {
+				color: #FA6400;
+			}
+			.image {
+				width: 100%;
+				margin-top: 20rpx;
+				image {
+					width: 100%;
+				}
+			}
+		}
+	}
+	.apply-button {
+		padding: 0 50rpx;
+		margin-top: 50rpx;
+	}
+	.refund-details-status {
+		background-color: #fff;
+		padding: 0 17px;
+		margin-top: 50rpx;
+		.refund-details-status-item {
+			display: flex;
+			line-height: 70rpx;
+			view {
+				&:first-child {
+					width: 150rpx;
+					text-align: right;
+				}
+				&:last-child {
+					width: calc(100% - 150rpx);
+				}
+			}
+		}
+	}
+}
+/* 订单详情  状态支付退款成功 */
+.order-details {
+	padding: 0 20px;
+	.order-details-content {
+		.order-details-content-header {
+			text-align: center;
+			margin-top: 54rpx;
+			font-size: 50rpx;
+			font-weight: 600;
+			image {
+				width: 90rpx;
+				height: 90rpx;
+			}
+		}
+		.order-details-content-item {
+			display: flex;
+			line-height: 70rpx;
+			view {
+				&:first-child {
+					width: 150rpx;
+					color: #2A2A2A;
+				}
+				&:last-child {
+					width: calc(100% - 150rpx);
+					text-align: right;
+					color: #6E6E6E;
+				}
+			}
+		}
+	}
+}

pages/applyRefundDetails/applyRefundDetails.vue

@@ -0,0 +1,84 @@
+<template>
+	<view class="refund-details">
+		<view class="refund-details-list">
+			<view class="refund-details-list-item">
+				<view class="rdli-label">申请时间：</view>
+				<view class="rdli-content">{{details.applyTime}}</view>
+			</view>
+			<view class="refund-details-list-item">
+				<view class="rdli-label">消费金额：</view>
+				<view class="rdli-content"><text class="rdli-font">{{details.refundAmount}}</text>元</view>
+			</view>
+			<view class="refund-details-list-item">
+				<view class="rdli-label">退款原因：</view>
+				<view class="rdli-content">{{details.refundReason}}</view>
+			</view>
+			<view class="refund-details-list-item">
+				<view class="rdli-label">图片：</view>
+				<view class="rdli-content">
+					<view
+						class="image"
+						v-for="(item, index) in details.images"
+						:key="index">
+						<image :src="item"></image>
+					</view>
+				</view>
+			</view>
+		</view>
+		<view class="apply-button" v-if="details.refundStatus === 0">
+			<u-button type="primary">申请中</u-button>
+		</view>
+		<view class="refund-details-status" v-if="details.refundStatus === 2">
+			<view class="refund-details-status-item">
+				<view>处理时间：</view>
+				<view>{{details.applyTime}}</view>
+			</view>
+			<view class="refund-details-status-item">
+				<view>处理结果：</view>
+				<view v-if="details.refundStatus === 1">已通过</view>
+				<view v-if="details.refundStatus === 2">已驳回</view>
+			</view>
+			<view class="refund-details-status-item">
+				<view>备注：</view>
+				<view>{{details.refuseReason}}</view>
+			</view>
+		</view>
+		<u-toast ref="uToast" />
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				details: {}
+			}
+		},
+		onLoad(page) {
+			this.getOrderRefundDetails(page.orderId)
+		},
+		methods: {
+			getOrderRefundDetails(orderId) {
+				this.$u.api.getOrderRefundDetails({
+					orderId: orderId
+				})
+					.then(res => {
+						console.log(res)
+						if (res.code === 200) {
+							this.details = res.data
+						}
+					})
+					.catch(err => {
+						this.$refs.uToast.show({
+							title: '操作失败',
+							type: 'error'
+						})
+					})
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+@import './applyRefundDetails.scss';
+</style>

pages/center/monthly/monthly.vue

@@ -1,53 +1,51 @@
 <template>
 	<!-- 包月 -->
 	<view class="monthly">
-		<u-navbar
+		<!-- <u-navbar
 		 title-color="#fff" 
 		 :custom-back="customBack" 
 		 :border-bottom="false" 
 		 back-icon-color="#CCE8FF" 
-		 :background="{background: '#008CFF' }" title="我的包月"></u-navbar>
-		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" >
-			<scroll-view scroll-y style="height: 100%; width: 100%;">
-				<view class="monthly-list">
-					<view class="monthly-list-item"  v-for="(monthlyItem, index) in  monthlyList" :key="monthlyItem.id">
-						<view class="monthly-list-item-top">
-							<view class="mlit-left">
-								<view>{{monthlyItem.vehicleNo}}</view>
-								<view>{{monthlyItem.roadName}}</view>
-							</view>
-							<view class="mlit-right u-flex">
-							<view class="mlit-right-item fee-status" v-if="monthlyItem.feeStatus === 0">未缴费</view>
-							<view class="mlit-right-item fee-status" v-if="monthlyItem.feeStatus === 1">已缴费</view>
-							<view class="mlit-right-item" v-if="monthlyItem.energyType === 1">汽油车</view>
-							<view class="mlit-right-item" v-if="monthlyItem.energyType === 2">新能源</view>
-							</view>
+		 :background="{background: '#008CFF' }" title="我的包月"></u-navbar> -->
+		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback">
+			<view class="monthly-list">
+				<view class="monthly-list-item" :index="index" v-for="(monthlyItem, index) in  monthlyList" :key="index">
+					<view class="monthly-list-item-top">
+						<view class="mlit-left">
+							<view>{{monthlyItem.vehicleNo}}</view>
+							<view>{{monthlyItem.roadName}}</view>
 						</view>
-						<view class="monthly-list-item-bottom" >
-							<view class="mlib-item">
-								<view>有效期限</view>:
-								<view>{{(monthlyItem.beginTime.split('-')).join('.')}}-{{(monthlyItem.endTime.split('-')).join('.')}}</view>
-							</view>
-							<view class="mlib-item">
-								<view>剩余天数</view>:
-								<view>{{monthlyItem.surplusDays}}天</view>
-							</view>
+						<view class="mlit-right u-flex">
+						<view class="mlit-right-item fee-status" v-if="monthlyItem.feeStatus === 0">未缴费</view>
+						<view class="mlit-right-item fee-status" v-if="monthlyItem.feeStatus === 1">已缴费</view>
+						<view class="mlit-right-item" v-if="monthlyItem.energyType === 1">汽油车</view>
+						<view class="mlit-right-item" v-if="monthlyItem.energyType === 2">新能源</view>
 						</view>
-						<view v-if="monthlyItem.feeStatus=='0'" class="button-wrap u-flex u-row-right">
-							<view class="tool-btn" 
-							:class="{'tool-btn-cancel':monthlyItem.feeStatus=='0'}" 
-							v-if="monthlyItem.feeStatus=='0'" 
-							@click="cancelMonth(monthlyItem.monthId)">取消订单</view>
-						</view>
-						<view v-else-if="monthlyItem.feeStatus == 1 && monthlyItem.surplusDays > 2" class="button-wrap u-flex u-row-right">
-							<view class="tool-btn">已缴费</view>
+					</view>
+					<view class="monthly-list-item-bottom" >
+						<view class="mlib-item">
+							<view>有效期限</view>:
+							<view>{{(monthlyItem.beginTime.split('-')).join('.')}}-{{(monthlyItem.endTime.split('-')).join('.')}}</view>
 						</view>
-						<view v-else-if="monthlyItem.feeStatus == 1 && monthlyItem.surplusDays < 3" class="button-wrap u-flex u-row-right">
-							<view class="tool-btn" @click="goRenewal(monthlyItem)">去续费</view>
+						<view class="mlib-item">
+							<view>剩余天数</view>:
+							<view>{{monthlyItem.surplusDays}}天</view>
 						</view>
 					</view>
+					<view v-if="monthlyItem.feeStatus=='0'" class="button-wrap u-flex u-row-right">
+						<view class="tool-btn" 
+						:class="{'tool-btn-cancel':monthlyItem.feeStatus=='0'}" 
+						v-if="monthlyItem.feeStatus=='0'" 
+						@click="cancelMonth(monthlyItem.monthId)">取消订单</view>
+					</view>
+					<view v-else-if="monthlyItem.feeStatus == 1 && monthlyItem.surplusDays > 2" class="button-wrap u-flex u-row-right">
+						<view class="tool-btn">已缴费</view>
+					</view>
+					<view v-else-if="monthlyItem.feeStatus == 1 && monthlyItem.surplusDays < 3" class="button-wrap u-flex u-row-right">
+						<view class="tool-btn" @click="goRenewal(monthlyItem)">去续费</view>
+					</view>
 				</view>
-			</scroll-view>
+			</view>
 		</mescroll-body>
 		<u-modal v-model="canclShow" content="确认取消该订单？" @confirm="confirm" :show-cancel-button="true"></u-modal>
 		<u-toast ref="uToast" />
@@ -105,7 +103,7 @@
 					// 接口返回的总数据量(如列表有26个数据,每页10条,共3页; 则totalSize=26)
 					let totalSize = res.data.total; 
 					// 接口返回的是否有下一页 (true/false)
-					// let hasNext = data.pages; 
+					// let hasNext = Number(res.data.page) < Number(res.data.pages); 
 					
 					//设置列表数据
 					if(page.num == 1) this.monthlyList = []; //如果是第一页需手动置空列表

pages/center/monthly/monthly1.vue

@@ -0,0 +1,165 @@
+<template>
+	<!-- 包月 -->
+	<view class="monthly">
+		<!-- <u-navbar
+		 title-color="#fff" 
+		 :custom-back="customBack" 
+		 :border-bottom="false" 
+		 back-icon-color="#CCE8FF" 
+		 :background="{background: '#008CFF' }" title="我的包月"></u-navbar> -->
+		 <mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback">
+			 <view class="monthly-list">
+			 	<view class="monthly-list-item"  v-for="(monthlyItem, index) in  dataList" :key="monthlyItem.id">
+			 		<view class="monthly-list-item-top">
+			 			<view class="mlit-left">
+			 				<view>{{monthlyItem.vehicleNo}}</view>
+			 				<view>{{monthlyItem.roadName}}</view>
+			 			</view>
+			 			<view class="mlit-right u-flex">
+			 			<view class="mlit-right-item fee-status" v-if="monthlyItem.feeStatus === 0">未缴费</view>
+			 			<view class="mlit-right-item fee-status" v-if="monthlyItem.feeStatus === 1">已缴费</view>
+			 			<view class="mlit-right-item" v-if="monthlyItem.energyType === 1">汽油车</view>
+			 			<view class="mlit-right-item" v-if="monthlyItem.energyType === 2">新能源</view>
+			 			</view>
+			 		</view>
+			 		<view class="monthly-list-item-bottom" >
+			 			<view class="mlib-item">
+			 				<view>有效期限</view>:
+			 				<view>{{(monthlyItem.beginTime.split('-')).join('.')}}-{{(monthlyItem.endTime.split('-')).join('.')}}</view>
+			 			</view>
+			 			<view class="mlib-item">
+			 				<view>剩余天数</view>:
+			 				<view>{{monthlyItem.surplusDays}}天</view>
+			 			</view>
+			 		</view>
+			 		<view v-if="monthlyItem.feeStatus=='0'" class="button-wrap u-flex u-row-right">
+			 			<view class="tool-btn" 
+			 			:class="{'tool-btn-cancel':monthlyItem.feeStatus=='0'}" 
+			 			v-if="monthlyItem.feeStatus=='0'" 
+			 			@click="cancelMonth(monthlyItem.monthId)">取消订单</view>
+			 		</view>
+			 		<view v-else-if="monthlyItem.feeStatus == 1 && monthlyItem.surplusDays > 2" class="button-wrap u-flex u-row-right">
+			 			<view class="tool-btn">已缴费</view>
+			 		</view>
+			 		<view v-else-if="monthlyItem.feeStatus == 1 && monthlyItem.surplusDays < 3" class="button-wrap u-flex u-row-right">
+			 			<view class="tool-btn" @click="goRenewal(monthlyItem)">去续费</view>
+			 		</view>
+			 	</view>
+			 </view>
+		 </mescroll-body>
+		<u-modal v-model="cancelShow" content="确认取消该订单？" @confirm="confirm" :show-cancel-button="true"></u-modal>
+		<u-toast ref="uToast" />
+	</view>
+</template>
+
+<script>
+	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
+	export default {
+		mixins: [MescrollMixin], // 使用mixin
+		data() {
+			return {
+				cancelShow: false,
+				mescroll: null,
+				dataList: []
+			}
+		},
+		onShow() {
+			// onShow 刷新数据
+			if(this.mescroll){
+				this.mescroll.triggerDownScroll();
+			}
+		},
+		methods: {
+			customBack(){
+				this.$u.route({
+					type:'switchTab',
+					url: 'pages/center/index'
+				});
+			},
+			// mescroll组件初始化的回调,可获取到mescroll对象
+			mescrollInit(mescroll) {
+				this.mescroll = mescroll;
+			},
+			// 下拉刷新的回调
+			downCallback(){
+				// 下拉刷新和上拉加载调同样的接口
+				this.mescroll.resetUpScroll(); // 重置列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
+			},
+			// 上拉加载的回调
+			upCallback(page) {
+				let pageNum = page.num; // 页码, 默认从1开始
+				let pageSize = page.size; // 页长, 默认每页10条
+				this.$u.api.getMonthList({
+					pageSize: pageSize,
+					pageNum: pageNum,
+				})
+				.then(res =>{
+					console.log(res)
+					if (res.code === 200) {
+						// 接口返回的当前页数据列表 (数组)
+						let curPageData = res.data.rows; 
+						// 接口返回的当前页数据长度 
+						let curPageLen = curPageData.length; 
+						// 接口返回的总页数 (如列表有26个数据,每页10条,共3页; 则totalPage=3)
+						let totalPage = res.data.pages; 
+						// 接口返回的总数据量(如列表有26个数据,每页10条,共3页; 则totalSize=26)
+						let totalSize = res.data.total; 
+						// 接口返回的是否有下一页 (true/false)
+						let hasNext = res.data.page < res.data.pages; 
+						
+						//设置列表数据
+						if(page.num == 1) this.dataList = []; //如果是第一页需手动置空列表
+						this.dataList = this.dataList.concat(curPageData); //追加新数据
+						
+						// 请求成功,隐藏加载状态
+						this.mescroll.endByPage(curPageLen, totalPage);
+						setTimeout(()=>{
+							this.mescroll.endSuccess(curPageLen)
+						}, 20)
+					}
+				})
+				.catch(err => {
+					this.$refs.uToast.show({
+						title: '操作失败!',
+						type: 'error'
+					})
+				})
+			},
+			confirm(){
+				this.$u.api.cancelMonth({monthId: this.id})
+				.then(res=>{
+					if(res.code === 200){
+					this.$refs.uToast.show({ 
+						title: res.msg,
+						type: 'success',
+					});
+					this.downCallback()
+					}else{
+						
+					}
+				}).catch(err=>{
+					this.$refs.uToast.show({
+						title: err.msg,
+						type: 'error',
+					});
+				})
+			},
+			/**
+			 * 去续费
+			 * */
+			goRenewal(item) {
+				this.$u.route({
+					url: 'pages/handleMonthly/handleMonthly',
+					params: {
+						roadNo: item.roadNo,
+						vehicleNo: item.vehicleNo
+					}
+				})
+			 }
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+@import './monthly.scss';
+</style>

pages/center/order/order.scss

@@ -42,6 +42,11 @@
 					color: #858585;
 				}
 			}
+			.apply-refund {
+				border-color: #BDBDBD;
+				color: #858585;
+				margin-right: 5rpx;
+			}
 		}
 		.order-center{
 			padding: 0 40rpx 25rpx;

pages/center/order/order.vue

@@ -8,13 +8,29 @@
 				<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" @click="goDetails(orderItem)" 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" :class="{'order-top-right-finished':orderItem.orderStatus=='4'}">{{orderItem.orderStatus | verifyStatusFilter}}</view>
+									<view
+										class="order-top-right apply-refund"
+										v-show="current === 3 && orderItem.allowRefund == 1 && (orderItem.refundStatus === 2 || !orderItem.refundStatus && orderItem.refundStatus !== 0)"
+										@click.stop="applyRefund(orderItem)"
+										>申请退款</view>
+									<view
+										class="order-top-right apply-refund"
+										@click.stop="applyRefundDetails(orderItem)"
+										v-show="current === 3 && (orderItem.refundStatus || orderItem.refundStatus == 0)">
+										{{orderItem.refundStatus | verifyRefundStatus}}
+									</view>
+									<view
+										class="order-top-right"
+										v-show="!orderItem.refundStatus && orderItem.refundStatus != 0"
+										:class="{'order-top-right-finished': orderItem.orderStatus == '4'}">
+										{{orderItem.orderStatus | verifyStatusFilter}}
+									</view>
 								</view>
 								<view class="order-center">
 									<view class="order-center-item">订单编号：{{orderItem.orderId}}</view>
@@ -64,9 +80,9 @@ export default {
 	},
 	onShow(){
 		// onShow 刷新数据
-		this.list[0].pageNum = 1;
+		this.list[this.current].pageNum = 1;
 		this.orderList=[[], [], [], []];
-		this.getOrderList(this.list[0]);
+		this.getOrderList(this.list[this.current]);
 	},
 	computed: {
 		// 价格小数
@@ -141,22 +157,40 @@ export default {
 			this.swiperCurrent = current;
 			this.current = current;
 		},
-		goDetails(id){
-			this.$u.route({
-				url: 'pages/center/order/orderDetails/orderDetails',
-				params: {
-					orderId: id
-				}
-			});
+		goDetails(item){
+			if (item.refundStatus === 1) { // 退款完成
+				this.$u.route('pages/applyRefundDetails/applyRefundAchieveDetails', {
+					orderId: item.orderId
+				})
+			} else {
+				this.$u.route({ // 未发起退款或者未退款成功的
+					url: 'pages/center/order/orderDetails/orderDetails',
+					params: {
+						orderId: item.id
+					}
+				});
+			}
 		},
 		jumpChargeStandard(item) {
-			console.log(item)
 			this.$u.route({
 				url: 'pages/chargeStandard/chargeStandard',
 				params: {
 					roadNo: item.roadNo
 				}
 			});
+		},
+		// 申请退款
+		applyRefund(item) {
+			this.$u.route('pages/applyRefund/applyRefund', {
+				orderId: item.orderId,
+				payAmount: item.payAmount
+			})
+		},
+		// 申请退款详情
+		applyRefundDetails(item) {
+			this.$u.route('pages/applyRefundDetails/applyRefundDetails', {
+				orderId: item.orderId
+			})
 		}
 	},
 	filters:{
@@ -173,6 +207,25 @@ export default {
 			  return '';
 			}
 		},
+		verifyRefundStatus(value) {
+			switch(value) {
+				case 0:
+					return '申请退款中';
+					break;
+				case 1:
+					return '已通过';
+					break;
+				case 2:
+					return '已驳回';
+					break;
+				case 3:
+					return '退款失败';
+					break;
+				default:
+					return null;
+					break;
+			}
+		}
 	}
 };
 </script>