账单一波

src/projects/business/views/Master/Mine/Bill/Info.vue

@@ -1,49 +1,111 @@
 <template>
 <div>
-    <header class="mui-bar mui-bar-nav">
-				<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
-				<h1 class="mui-title">账单详情</h1>
-			</header>
+
+			 <common @asynCallBack="asynCallBack"></common>
+                	<top-header :pageTitle="pageTitle"  ></top-header>
+
+
 			<div class="mui-content vongi-qingjiadt">
 				<form class="mui-input-group vongi-cd-payli">
 					<div class="mui-input-row flew-sp">
-						<h3>2021年物业管理费</h3>
-						<h3>-1998.00</h3>
-					</div>
-					<div class="mui-input-row">
-						<label>缴费单位</label>
-						<span>沙市花园XX物业</span>
-					</div>
-					<div class="mui-input-row">
-						<label>缴费户号</label>
-						<span>1-2-1101</span>
-					</div>
-					<div class="mui-input-row">
-						<label>户名</label>
-						<span>111</span>
-					</div>
-					<div class="mui-input-row">
-						<label>住址信息</label>
-						<span>沙市花园1-2-1101</span>
-					</div>
-					<div class="mui-input-row">
-						<label>创建时间</label>
-						<span>2020-09-18 18:15</span>
-					</div>
-					<div class="mui-input-row">
-						<label style="width:25%">订单号</label>
-						<span style="width:75%" class="mui-ellipsis">202009180000300018150060415263</span>
+							<h3>{{detail.body}}</h3>
+                        	<h3>-￥{{detail.totalFee}}</h3>
 					</div>
+					<div class="mui-input-row" v-for="(value,key,index)  in list">
+                						<label>{{key}}</label>
+                						<span>{{value}}</span>
+                					</div>
+
+				<div class="mui-input-row">
+                						<label>创建时间</label>
+                						<span>{{detail.createTime}}</span>
+                					</div>
+                					<div class="mui-input-row">
+                						<label style="width:25%">订单号</label>
+                						<span style="width:75%" class="mui-ellipsis">{{detail.outOrderNo}}</span>
+                					</div>
 					<div class="mui-input-row">
 						<label>完成时间</label>
-						<span>2020-09-18 18:15</span>
+                		<span>{{detail.payTime}}</span>
 					</div>
 				</form>
 			</div>
+			           <loading :visible="isLoading"></loading>
+
 </div>
 </template>
 MasterMineBillInfo
+
+
 <script>
+	import * as API_Pay from '$project/apis/payment'
+	import Common from '$project/components/Common.vue'
+	import Loading from '$project/components/Loading.vue'
+	import TopHeader from '$project/components/TopHeader.vue'
+
+	import {
+		mapGetters,
+		mapMutations
+	} from 'vuex'
+
+	import {
+
+
+	} from '$project/utils'
+	export default {
+		name: 'MasterMineBillInfo',
+		components: {
+			Common,
+			Loading,
+			TopHeader
+		},
+		data() {
+			return {
+				pageTitle: '账单详情',
+
+				qrCodeImg:"",
+				isLoading: false,
+				detail:{},
+				list:[],
+				goodsTpey:{},
+				id:''
+
+			}
+		},
+		created() {
+			this.id=this.$route.query.id;
+
+			},
+		methods:  {
+		getDetail(){
+	        	API_Pay.orderDetail({id:this.id}).then(res=>{
+                    this.detail=res.orderInfo;
+                    this.info=res.goodsTpey;
+                    this.goodsTpey=res.goodsTpey;
+
+                    this.list=JSON.parse(res.orderInfo.detail);
+        		}).catch(error => {
+
+        		})
+		}
+
+		 ,asynCallBack(){},
+		},
+		mounted() {
+            this.getDetail();
+		},
+		destroyed() {
+
+		},
+		computed: {
+			...mapGetters({
+				openId: 'wx_openid',
+				token: 'token',
+				person_data: 'person_data',
+				person_popedom: 'person_popedom',
+			})
+		}
+	}
 </script>
 
 <style scoped src="$project/assets/css/xpwyfyy.css"></style>

src/projects/business/views/Master/Mine/Bill/List.vue

@@ -1,10 +1,6 @@
 <template>
 <div>
-    <header class="mui-bar mui-bar-nav">
-			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
-			<h1 class="mui-title">我的账单</h1>
-			<a class="mui-pull-right" href=""><span class="mui-icon iconfont icon-baobiao"></span>账单记录</a>
-		</header>
+
 	    <common @asynCallBack="asynCallBack"></common>
     	<top-header :pageTitle="pageTitle" :rightLink="rightLink" :doRightLink="doRightLink"></top-header>
 
@@ -22,10 +18,10 @@
 						</div>
 					</a>
 				</li>
-
 			</ul>
-
 		</div>
+		 <loading :visible="isLoading"></loading>
+
 </div>
 </template>
 
@@ -81,7 +77,7 @@
 	        //右上角点击事件
 			doRightLink() {
 				this.$router.push({
-					name: 'MasterMineBillList',
+					name: 'MasterMineBillRecord',
 					query: {
  					}
 				})

src/projects/business/views/Master/Mine/Bill/Pay.vue

@@ -1,9 +1,8 @@
 <template>
 <div>
-    <header class="mui-bar mui-bar-nav">
-				<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
-				<h1 class="mui-title">收银台</h1>
-			</header>
+ <common @asynCallBack="asynCallBack"></common>
+    	<top-header :pageTitle="pageTitle"  ></top-header>
+
 			<div class="mui-content vongi-qingjiadt margin60"  >
 				<div class="vongi-cashier flew-sp">
 					<div class="vongi-zd flew-items">
@@ -15,7 +14,7 @@
 						</h3>
 					</div>
 					<div class="vongi-cd-pay">
-						<span class="iconfont icon-baobiao color4fc5f7"></span>
+						<span class="iconfont icon-baobiao color4fc5f7" @click="goRecord()"></span>
 						<h5>历史账单</h5>
 					</div>
 				</div>
@@ -53,7 +52,7 @@
 				<div class="vongi-cashier-btn-row">
 					<div class="vongi-cashier-btn-white">
 						<span>合计：<b class="colorfe616c">￥{{detail.totalFee}}</b></span>
-						<div class="vongi-cashier-btn" v-if="detail.status=='1'" @click="submit">支付</div>
+						<div class="vongi-cashier-btn" v-if="detail.payStatus=='10'" @click="submit">支付</div>
 					</div>
 				</div>
 			</div>
@@ -149,6 +148,16 @@
 					this.paytype=selectItems[0].text;
 				});
 			},
+			//info
+            			goRecord() {
+
+            				this.$router.push({
+            					name: 'MasterMineBillRecord',
+            					query: {
+
+            					}
+            				})
+            			},
 			//提交表单
 			submit() {
 				this.isLoading=true;

src/projects/business/views/Master/Mine/Bill/Record.vue

@@ -1,99 +1,172 @@
 <template>
 <div>
-    <header class="mui-bar mui-bar-nav">
-			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
-			<h1 class="mui-title">账单记录</h1>
-		</header>
+    <common @asynCallBack="asynCallBack"></common>
+    	<top-header :pageTitle="pageTitle"></top-header>
+
 		<div class="mui-content vongi-zd">
-			<div class="mui-content-padded">
-				<h5>本月</h5>
-			</div>
-			<ul class="mui-table-view vongi-zd-list">
-				<li class="mui-table-view-cell">
-					<a>
-						<div class="mui-media-object mui-pull-left">
-							<img src="~$project/assets/img/zd_dian.png">
-						</div>
-						<div class="mui-media-body">
-							<div class='mui-ellipsis flew-sp flew-items'>9月电费账单<span class="mui-h2">56.06</span></div>
-							<p>生活缴费</p>
-							<p>09-16 15:00</p>
-						</div>
-					</a>
-				</li>
-				<li class="mui-table-view-cell">
-					<a>
-						<div class="mui-media-object mui-pull-left">
-							<img src="~$project/assets/img/zd_shui.png">
-						</div>
-						<div class="mui-media-body">
-							<div class='mui-ellipsis flew-sp flew-items'>9月电费账单<span class="mui-h2">56.06</span></div>
-							<p>生活缴费</p>
-							<p>09-16 15:00</p>
-						</div>
-					</a>
-				</li>
-				<li class="mui-table-view-cell">
-					<a>
-						<div class="mui-media-object mui-pull-left">
-							<img src="~$project/assets/img/zd_fang.png">
-						</div>
-						<div class="mui-media-body">
-							<div class='mui-ellipsis flew-sp flew-items'>9月电费账单<span class="mui-h2">56.06</span></div>
-							<p>生活缴费</p>
-							<p>09-16 15:00</p>
-						</div>
-					</a>
-				</li>
-			</ul>
-			<div class="mui-content-padded">
-				<h5>九月</h5>
-			</div>
+
 			<ul class="mui-table-view vongi-zd-list">
+			<template v-for="mod in recordList">
+				<div class="mui-content-padded" v-if="ifshow(mod)" >
+                				<h5>{{mod.month}}</h5>
+                </div>
 				<li class="mui-table-view-cell">
 					<a>
 						<div class="mui-media-object mui-pull-left">
-							<img src="~$project/assets/img/zd_dian.png">
-						</div>
-						<div class="mui-media-body">
-							<div class='mui-ellipsis flew-sp flew-items'>9月电费账单<span class="mui-h2">56.06</span></div>
-							<p>生活缴费</p>
-							<p>09-16 15:00</p>
-						</div>
-					</a>
-				</li>
-				<li class="mui-table-view-cell">
-					<a>
-						<div class="mui-media-object mui-pull-left">
-							<img src="~$project/assets/img/zd_shui.png">
-						</div>
-						<div class="mui-media-body">
-							<div class='mui-ellipsis flew-sp flew-items'>9月电费账单<span class="mui-h2">56.06</span></div>
-							<p>生活缴费</p>
-							<p>09-16 15:00</p>
-						</div>
-					</a>
-				</li>
-				<li class="mui-table-view-cell">
-					<a>
-						<div class="mui-media-object mui-pull-left">
-							<img src="~$project/assets/img/zd_fang.png">
+							<img :src="mod.iconPic">
 						</div>
 						<div class="mui-media-body">
-							<div class='mui-ellipsis flew-sp flew-items'>9月电费账单<span class="mui-h2">56.06</span></div>
-							<p>生活缴费</p>
-							<p>09-16 15:00</p>
+							<div class='mui-ellipsis flew-sp flew-items'>{{mod.goodName}}<span class="mui-h2">￥{{mod.totalFee}}</span></div>
+							<p>{{mod.goodTypeName}}</p>
+							<p>{{mod.payTime}}</p>
 						</div>
 					</a>
 				</li>
+ 			</template>
+
 			</ul>
 		</div>
+		           <loading :visible="isLoading"></loading>
+
 </div>
 </template>
 
+
+
 <script>
+	import * as API_Pay from '$project/apis/payment'
+	import Common from '$project/components/Common.vue'
+	import Loading from '$project/components/Loading.vue'
+	import TopHeader from '$project/components/TopHeader.vue'
+	import isReachBottom from '$project/utils/isReachBottom'
+	import NullList from '$project/components/NullList.vue'
+	import {
+
+		currentTimeStamp,
+		parseUnixTime
+	} from '$project/utils'
+	import {
+		mapGetters,
+		mapMutations
+	} from 'vuex'
+	export default {
+		name: 'MasterMineBillRecord',
+		components: {
+			Common,
+			Loading,
+			TopHeader,NullList
+		},
+		data() {
+			return {
+				pageTitle: '账单记录',
+
+
+				isLoading: false,
+
+				listForm: {
+					pageIndex: 1,
+					pageSize: 20,
+ 					totalPage: 1,
+ 					status:20
+ 				},
+				recordList: [],
+                vmap:null,
+			}
+		},
+		created() {
+		this.vmap=new Map()
+ 		},
+		methods: {
+		ifshow(mod){
+            if(this.vmap.get(mod.month)){
+                return false;
+            }else{
+               this.vmap.set(mod.month, "1");
+                return true;
+            }
+		},
+	        //右上角点击事件
+			doRightLink() {
+				this.$router.push({
+					name: 'MasterMineBillRecord',
+					query: {
+ 					}
+				})
+			},
+			//info
+			goto(id) {
+
+				this.$router.push({
+					name: 'MasterMineBillPay',
+					query: {
+						id: id
+					}
+				})
+			},
+
+			//获取列表
+			getList() {
+				this.isLoading = true;
+				API_Pay.orderList(this.listForm).then(res => {
+					var response=res;
+					if (response) {
+						if (this.listForm.pageIndex == 1) {
+							this.recordList = response.data;
+							this.listForm.pageIndex = response.pageNumber;
+							this.listForm.totalPage = response.totalPage;
+						} else {
+							this.recordList = [
+								...this.recordList,
+								...response.data
+							];
+						}
+					}
+					this.listForm.pageIndex++;
+					this.isLoading = false;
+				}).catch(error => {
+					this.isLoading = false;
+					mui.toast(error);
+				})
+			},
+			//下拉事件
+			handleScrool() {
+				if (isReachBottom()) {
+					console.log('到达底部')
+					if (this.listForm.pageIndex <= this.listForm.totalPage && this.isLoading == false) {
+						this.getList();
+					} else {
+						return;
+					}
+				}
+			},
+
+			asynCallBack() {
+
+			},
+		},
+		mounted() {
+			this.getList();
+			//监控下拉加载事件
+			var _this = this;
+			window.addEventListener('scroll', _this.handleScrool);
+		},
+		destroyed() {
+			//销毁监听事件
+			var _this = this;
+			window.removeEventListener('scroll', _this.handleScrool);
+		},
+		computed: {
+			...mapGetters({
+				openId: 'wx_openid',
+				token: 'token',
+				person_data: 'person_data',
+				person_popedom: 'person_popedom',
+			})
+		},
+
+	}
 </script>
-MasterMineBillRecord
+
 <style scoped src="$project/assets/css/xpwyfyy.css"></style>
 <style src="$project/assets/css/iconfont.css"></style>
 <style>

src/projects/business/views/Master/Mine/Center.vue

@@ -29,9 +29,11 @@
 			<div class="vongi-me-list">
 				<ul class="mui-table-view mui-table-view-chevron vongi-news">
 					<li class="mui-table-view-cell">
-						<a class="mui-navigate-right">
-							<img src="~$project/assets/img/cicon32.png" width="18" /> 我的账单
-						</a>
+
+						<router-link :to="{name:'MasterMineBillList'}" class="mui-navigate-right">
+
+                        							<img src="~$project/assets/img/cicon32.png" width="18" /> 我的账单
+                        </router-link >
 					</li>
 					<li class="mui-table-view-cell">
 						<a class="mui-navigate-right">

src/projects/pension/router/master.js

@@ -137,11 +137,23 @@ const routesMaster = [
 						}
 					},
 
+
 					//我的账单
 					{
 						path: 'bill',
 						component: () => import('../views/Layout.vue'),
 						children: [
+							//账单缴费
+							{
+								path: 'pay',
+								name: 'MasterMineBillPay',
+								component: () => import('../views/Master/Mine/Bill/Pay.vue'),
+								meta: {
+									requireAuth: false,
+									role: [],
+									title: '账单缴费',
+								}
+							},
 							//账单列表
 							{
 								path: 'list',

src/projects/pension/views/Master/Mine/Bill/Info.vue

@@ -1,8 +1,114 @@
 <template>
+<div>
+
+			 <common @asynCallBack="asynCallBack"></common>
+                	<top-header :pageTitle="pageTitle"  ></top-header>
+
+
+			<div class="mui-content vongi-qingjiadt">
+				<form class="mui-input-group vongi-cd-payli">
+					<div class="mui-input-row flew-sp">
+							<h3>{{detail.body}}</h3>
+                        	<h3>-￥{{detail.totalFee}}</h3>
+					</div>
+					<div class="mui-input-row" v-for="(value,key,index)  in list">
+                						<label>{{key}}</label>
+                						<span>{{value}}</span>
+                					</div>
+
+				<div class="mui-input-row">
+                						<label>创建时间</label>
+                						<span>{{detail.createTime}}</span>
+                					</div>
+                					<div class="mui-input-row">
+                						<label style="width:25%">订单号</label>
+                						<span style="width:75%" class="mui-ellipsis">{{detail.outOrderNo}}</span>
+                					</div>
+					<div class="mui-input-row">
+						<label>完成时间</label>
+                		<span>{{detail.payTime}}</span>
+					</div>
+				</form>
+			</div>
+			           <loading :visible="isLoading"></loading>
+
+</div>
 </template>
+MasterMineBillInfo
+
 
 <script>
+	import * as API_Pay from '$project/apis/payment'
+	import Common from '$project/components/Common.vue'
+	import Loading from '$project/components/Loading.vue'
+	import TopHeader from '$project/components/TopHeader.vue'
+
+	import {
+		mapGetters,
+		mapMutations
+	} from 'vuex'
+
+	import {
+
+
+	} from '$project/utils'
+	export default {
+		name: 'MasterMineBillInfo',
+		components: {
+			Common,
+			Loading,
+			TopHeader
+		},
+		data() {
+			return {
+				pageTitle: '账单详情',
+
+				qrCodeImg:"",
+				isLoading: false,
+				detail:{},
+				list:[],
+				goodsTpey:{},
+				id:''
+
+			}
+		},
+		created() {
+			this.id=this.$route.query.id;
+
+			},
+		methods:  {
+		getDetail(){
+	        	API_Pay.orderDetail({id:this.id}).then(res=>{
+                    this.detail=res.orderInfo;
+                    this.info=res.goodsTpey;
+                    this.goodsTpey=res.goodsTpey;
+
+                    this.list=JSON.parse(res.orderInfo.detail);
+        		}).catch(error => {
+
+        		})
+		}
+
+		 ,asynCallBack(){},
+		},
+		mounted() {
+            this.getDetail();
+		},
+		destroyed() {
+
+		},
+		computed: {
+			...mapGetters({
+				openId: 'wx_openid',
+				token: 'token',
+				person_data: 'person_data',
+				person_popedom: 'person_popedom',
+			})
+		}
+	}
 </script>
 
+<style scoped src="$project/assets/css/xpwyfyy.css"></style>
+<style src="$project/assets/css/iconfont.css"></style>
 <style>
 </style>

src/projects/pension/views/Master/Mine/Bill/List.vue

@@ -1,8 +1,162 @@
 <template>
+<div>
+
+	    <common @asynCallBack="asynCallBack"></common>
+    	<top-header :pageTitle="pageTitle" :rightLink="rightLink" :doRightLink="doRightLink"></top-header>
+
+		<div class="mui-content vongi-zd">
+			<ul class="mui-table-view">
+				<li class="mui-table-view-cell" v-for="mod in recordList">
+					<a @click="goto(mod.id)">
+						<div class="mui-media-object mui-pull-left">
+							<img :src="mod.iconPic">
+						</div>
+						<div class="mui-media-body">
+							<div class='flew-sp flew-items'>
+								<div class="mui-ellipsis mui-col-xs-8">{{mod.goodName}}</div><span :style="'color:'+mod.color" >{{mod.goodTypeName}}</span></div>
+							<div class='mui-ellipsis flew-sp mui-h2 flew-items'>{{mod.totalFee}}<span class="mui-h6">{{mod.createTime}}</span></div>
+						</div>
+					</a>
+				</li>
+			</ul>
+		</div>
+		 <loading :visible="isLoading"></loading>
+
+</div>
 </template>
 
 <script>
+	import * as API_Pay from '$project/apis/payment'
+	import Common from '$project/components/Common.vue'
+	import Loading from '$project/components/Loading.vue'
+	import TopHeader from '$project/components/TopHeader.vue'
+	import isReachBottom from '$project/utils/isReachBottom'
+	import NullList from '$project/components/NullList.vue'
+	import {
+
+		currentTimeStamp,
+		parseUnixTime
+	} from '$project/utils'
+	import {
+		mapGetters,
+		mapMutations
+	} from 'vuex'
+	export default {
+		name: 'MasterMineBillList',
+		components: {
+			Common,
+			Loading,
+			TopHeader,NullList
+		},
+		data() {
+			return {
+				pageTitle: '我的账单',
+
+				rightLink: {
+					show: true,
+					icon: 'icon-baobiao',
+					style: 'font-size:14px',
+					title: '账单记录'
+				},
+				isLoading: false,
+
+				listForm: {
+					pageIndex: 1,
+					pageSize: 20,
+ 					totalPage: 1,
+ 					status:10
+ 				},
+				recordList: [],
+ 				statusColor: ['colorf8b155', 'color55f868', 'colorfe616c','color999'],
+
+			}
+		},
+		created() {
+ 		},
+		methods: {
+	        //右上角点击事件
+			doRightLink() {
+				this.$router.push({
+					name: 'MasterMineBillRecord',
+					query: {
+ 					}
+				})
+			},
+			//info
+			goto(id) {
+
+				this.$router.push({
+					name: 'MasterMineBillPay',
+					query: {
+						id: id
+					}
+				})
+			},
+
+			//获取列表
+			getList() {
+				this.isLoading = true;
+				API_Pay.orderList(this.listForm).then(res => {
+					var response=res;
+					if (response) {
+						if (this.listForm.pageIndex == 1) {
+							this.recordList = response.data;
+							this.listForm.pageIndex = response.pageNumber;
+							this.listForm.totalPage = response.totalPage;
+						} else {
+							this.recordList = [
+								...this.recordList,
+								...response.data
+							];
+						}
+					}
+					this.listForm.pageIndex++;
+					this.isLoading = false;
+				}).catch(error => {
+					this.isLoading = false;
+					mui.toast(error);
+				})
+			},
+			//下拉事件
+			handleScrool() {
+				if (isReachBottom()) {
+					console.log('到达底部')
+					if (this.listForm.pageIndex <= this.listForm.totalPage && this.isLoading == false) {
+						this.getList();
+					} else {
+						return;
+					}
+				}
+			},
+
+			asynCallBack() {
+
+			},
+		},
+		mounted() {
+			this.getList();
+			//监控下拉加载事件
+			var _this = this;
+			window.addEventListener('scroll', _this.handleScrool);
+		},
+		destroyed() {
+			//销毁监听事件
+			var _this = this;
+			window.removeEventListener('scroll', _this.handleScrool);
+		},
+		computed: {
+			...mapGetters({
+				openId: 'wx_openid',
+				token: 'token',
+				person_data: 'person_data',
+				person_popedom: 'person_popedom',
+			})
+		},
+
+	}
 </script>
 
+<style scoped src="$project/assets/css/xpwyfyy.css"></style>
+<style src="$project/assets/css/iconfont.css"></style>
 <style>
 </style>

src/projects/pension/views/Master/Mine/Bill/Pay.vue

@@ -0,0 +1,228 @@
+<template>
+<div>
+ <common @asynCallBack="asynCallBack"></common>
+    	<top-header :pageTitle="pageTitle"  ></top-header>
+
+			<div class="mui-content vongi-qingjiadt margin60"  >
+				<div class="vongi-cashier flew-sp">
+					<div class="vongi-zd flew-items">
+						<div class="mui-media-object">
+							<img :src="goodsTpey.iconPic">
+						</div>
+						<h3>
+							{{goodsTpey.goodsName}}
+						</h3>
+					</div>
+					<div class="vongi-cd-pay">
+						<span class="iconfont icon-baobiao color4fc5f7" @click="goRecord()"></span>
+						<h5>历史账单</h5>
+					</div>
+				</div>
+				<form class="mui-input-group vongi-cd-payli">
+					<div class="mui-input-row flew-sp">
+						<h3>{{detail.body}}</h3>
+						<h3>￥{{detail.totalFee}}</h3>
+					</div>
+					<div class="mui-input-row" v-for="(value,key,index)  in list">
+						<label>{{key}}</label>
+						<span>{{value}}</span>
+					</div>
+
+					<div class="mui-input-row">
+						<label>创建时间</label>
+						<span>{{detail.createTime}}</span>
+					</div>
+					<div class="mui-input-row">
+						<label style="width:25%">订单号</label>
+						<span style="width:75%" class="mui-ellipsis">{{detail.outOrderNo}}</span>
+					</div>
+				</form>
+				<div class="mui-content-padded">
+					<h5>支付方式</h5></div>
+				<form class="mui-input-group margin10">
+					<div class="mui-input-row mui-radio">
+						<label>微信支付</label>
+						<input name="radio1"  value="1" v-model="paytypeindex" type="radio">
+					</div>
+					<div class="mui-input-row mui-radio">
+						<label>支付宝支付</label>
+						<input name="radio1"  value="2" v-model="paytypeindex" type="radio" checked>
+					</div>
+				</form>
+				<div class="vongi-cashier-btn-row">
+					<div class="vongi-cashier-btn-white">
+						<span>合计：<b class="colorfe616c">￥{{detail.totalFee}}</b></span>
+						<div class="vongi-cashier-btn" v-if="detail.payStatus=='10'" @click="submit">支付</div>
+					</div>
+				</div>
+			</div>
+			<img id="qrcode">
+           <loading :visible="isLoading"></loading>
+
+</div>
+</template>
+
+
+<script>
+	import * as API_Pay from '$project/apis/payment'
+	import Common from '$project/components/Common.vue'
+	import Loading from '$project/components/Loading.vue'
+	import TopHeader from '$project/components/TopHeader.vue'
+	require('$project/assets/js/mui.picker.min.js');
+	import QRCode from 'qrcodejs2'
+
+	import {
+		mapGetters,
+		mapMutations
+	} from 'vuex'
+	import {
+		wxPayJs
+	} from '$project/utils/wxpay'
+	import {
+
+		convertCanvasToImage,
+		currentTimeStamp,
+		parseUnixTime
+	} from '$project/utils'
+	export default {
+		name: 'MasterMineBillPay',
+		components: {
+			Common,
+			Loading,
+			TopHeader
+		},
+		data() {
+			return {
+				pageTitle: '收银台',
+				paytypeindex:"1",
+				paycode:'',
+				paytype:"微信支付",
+				qrCodeImg:"",
+				isLoading: false,
+				detail:{},
+
+				list:[],
+				goodsTpey:{},
+
+				id:''
+
+			}
+		},
+		created() {
+			this.id=this.$route.query.id;
+
+			},
+		methods:  {
+		getDetail(){
+	        	API_Pay.orderDetail({id:this.id}).then(res=>{
+                    this.detail=res.orderInfo;
+                    this.info=res.goodsTpey;
+                    this.goodsTpey=res.goodsTpey;
+
+                    this.list=JSON.parse(res.orderInfo.detail);
+        		}).catch(error => {
+
+        		})
+		},
+			selectPay() {
+				var picker = new mui.PopPicker();
+
+				picker.setData([{
+					text: "微信支付",
+					value: '1'
+				}
+					,
+					{
+						text: "支付宝扫码",
+						value: '2'
+					}
+					// ,
+					// {
+					// 	text: "现场支付",
+					// 	value: '0'
+					// }
+				]);
+
+				picker.show((selectItems) => {
+					this.paytypeindex=selectItems[0].value;
+					this.paytype=selectItems[0].text;
+				});
+			},
+			//info
+            			goRecord() {
+
+            				this.$router.push({
+            					name: 'MasterMineBillRecord',
+            					query: {
+
+            					}
+            				})
+            			},
+			//提交表单
+			submit() {
+				this.isLoading=true;
+				if(this.paytypeindex=="1"){
+					API_Pay.wxJsapiPay(this.detail.id,'').then(data=>{
+
+						this.isLoading=false;
+						wxPayJs(data)
+					}).catch(error => {
+						this.isLoading = false;
+						mui.toast(error);
+					})
+
+				}else if(this.paytypeindex=="2"){
+					API_Pay.tradePrecreatePay(this.detail.id,'').then(url=>{
+						this.isLoading = false;
+						let qrcode = new QRCode('qrcode', {
+							width: 200,
+							height: 200,
+							text: url,
+							correctLevel: QRCode.CorrectLevel.M,
+
+						})
+						var canvas = document.getElementsByTagName('canvas')[0];
+						this.qrCodeImg = convertCanvasToImage(canvas);
+
+						var btnArray = ['关闭',"支付成功?"];
+						var _this=this
+						mui.confirm('<img src="'+this.qrCodeImg+'" >',
+
+								'请使用支付宝扫码', btnArray, function(e) {
+									if (e.index == 1) {
+										_this.$router.push({
+											name: 'MasterMineBillList',
+										})
+									}
+
+								})
+					}).catch(error => {
+						this.isLoading = false;
+						mui.toast(error);
+					})
+				}
+
+
+			},asynCallBack(){},
+		},
+		mounted() {
+            this.getDetail();
+		},
+		destroyed() {
+
+		},
+		computed: {
+			...mapGetters({
+				openId: 'wx_openid',
+				token: 'token',
+				person_data: 'person_data',
+				person_popedom: 'person_popedom',
+			})
+		}
+	}
+</script>
+
+<style scoped src="$project/assets/css/xpwyfyy.css"></style>
+<style src="$project/assets/css/iconfont.css"></style>
+<style>
+</style>

src/projects/pension/views/Master/Mine/Bill/Record.vue

@@ -1,8 +1,173 @@
 <template>
+<div>
+    <common @asynCallBack="asynCallBack"></common>
+    	<top-header :pageTitle="pageTitle"></top-header>
+
+		<div class="mui-content vongi-zd">
+
+			<ul class="mui-table-view vongi-zd-list">
+			<template v-for="mod in recordList">
+				<div class="mui-content-padded" v-if="ifshow(mod)" >
+                				<h5>{{mod.month}}</h5>
+                </div>
+				<li class="mui-table-view-cell">
+					<a>
+						<div class="mui-media-object mui-pull-left">
+							<img :src="mod.iconPic">
+						</div>
+						<div class="mui-media-body">
+							<div class='mui-ellipsis flew-sp flew-items'>{{mod.goodName}}<span class="mui-h2">￥{{mod.totalFee}}</span></div>
+							<p>{{mod.goodTypeName}}</p>
+							<p>{{mod.payTime}}</p>
+						</div>
+					</a>
+				</li>
+ 			</template>
+
+			</ul>
+		</div>
+		           <loading :visible="isLoading"></loading>
+
+</div>
 </template>
 
+
+
 <script>
+	import * as API_Pay from '$project/apis/payment'
+	import Common from '$project/components/Common.vue'
+	import Loading from '$project/components/Loading.vue'
+	import TopHeader from '$project/components/TopHeader.vue'
+	import isReachBottom from '$project/utils/isReachBottom'
+	import NullList from '$project/components/NullList.vue'
+	import {
+
+		currentTimeStamp,
+		parseUnixTime
+	} from '$project/utils'
+	import {
+		mapGetters,
+		mapMutations
+	} from 'vuex'
+	export default {
+		name: 'MasterMineBillRecord',
+		components: {
+			Common,
+			Loading,
+			TopHeader,NullList
+		},
+		data() {
+			return {
+				pageTitle: '账单记录',
+
+
+				isLoading: false,
+
+				listForm: {
+					pageIndex: 1,
+					pageSize: 20,
+ 					totalPage: 1,
+ 					status:20
+ 				},
+				recordList: [],
+                vmap:null,
+			}
+		},
+		created() {
+		this.vmap=new Map()
+ 		},
+		methods: {
+		ifshow(mod){
+            if(this.vmap.get(mod.month)){
+                return false;
+            }else{
+               this.vmap.set(mod.month, "1");
+                return true;
+            }
+		},
+	        //右上角点击事件
+			doRightLink() {
+				this.$router.push({
+					name: 'MasterMineBillRecord',
+					query: {
+ 					}
+				})
+			},
+			//info
+			goto(id) {
+
+				this.$router.push({
+					name: 'MasterMineBillPay',
+					query: {
+						id: id
+					}
+				})
+			},
+
+			//获取列表
+			getList() {
+				this.isLoading = true;
+				API_Pay.orderList(this.listForm).then(res => {
+					var response=res;
+					if (response) {
+						if (this.listForm.pageIndex == 1) {
+							this.recordList = response.data;
+							this.listForm.pageIndex = response.pageNumber;
+							this.listForm.totalPage = response.totalPage;
+						} else {
+							this.recordList = [
+								...this.recordList,
+								...response.data
+							];
+						}
+					}
+					this.listForm.pageIndex++;
+					this.isLoading = false;
+				}).catch(error => {
+					this.isLoading = false;
+					mui.toast(error);
+				})
+			},
+			//下拉事件
+			handleScrool() {
+				if (isReachBottom()) {
+					console.log('到达底部')
+					if (this.listForm.pageIndex <= this.listForm.totalPage && this.isLoading == false) {
+						this.getList();
+					} else {
+						return;
+					}
+				}
+			},
+
+			asynCallBack() {
+
+			},
+		},
+		mounted() {
+			this.getList();
+			//监控下拉加载事件
+			var _this = this;
+			window.addEventListener('scroll', _this.handleScrool);
+		},
+		destroyed() {
+			//销毁监听事件
+			var _this = this;
+			window.removeEventListener('scroll', _this.handleScrool);
+		},
+		computed: {
+			...mapGetters({
+				openId: 'wx_openid',
+				token: 'token',
+				person_data: 'person_data',
+				person_popedom: 'person_popedom',
+			})
+		},
+
+	}
 </script>
 
+<style scoped src="$project/assets/css/xpwyfyy.css"></style>
+<style src="$project/assets/css/iconfont.css"></style>
 <style>
 </style>

src/projects/pension/views/Master/Mine/Center.vue

@@ -29,9 +29,12 @@
 			<div class="vongi-me-list">
 				<ul class="mui-table-view mui-table-view-chevron vongi-news">
 					<li class="mui-table-view-cell">
-						<a class="mui-navigate-right">
+
+						<router-link :to="{name:'MasterMineBillList'}" class="mui-navigate-right">
+
 							<img src="~$project/assets/img/cicon32.png" width="18" /> 我的账单
-						</a>
+						</router-link >
+
 					</li>
 					<li class="mui-table-view-cell">
 						<a class="mui-navigate-right">